Pure CSS albums gallery

What is a pure css albums gallery How do you make a pure css albums gallery? This script and codes were developed by Renaud Tertrais on 16 October 2021, Saturday.

How do I make an pure css albums gallery?
  1. Pure CSS albums gallery Previews
  2. Pure CSS albums gallery HTML Codes
  3. Pure CSS albums gallery CSS Codes
  4. Pure CSS albums gallery JS Codes
Pure CSS albums gallery Previews

Pure CSS albums gallery HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Pure CSS albums gallery</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<div id="main" class="container">
  <h1 class="text-center">pure CSS albums gallery</h1>
  <div id="gallery" class="row">
    <div class="col-xs-4 gallery-item">
      <div class="album">
        <img src="http://lorempixel.com/400/400/sports/" alt="" />
        <img src="http://lorempixel.com/400/400/nature/" alt="" />
        <img src="http://lorempixel.com/400/400/animals/" alt="" />
      </div>
      <p>Holidays</p>
    </div>
    <div class="col-xs-4 gallery-item">
      <div class="album">
        <img src="http://lorempixel.com/400/400/city/" alt="" />
        <img src="http://lorempixel.com/400/400/fashion/" alt="" />
        <img src="http://lorempixel.com/400/400/people/" alt="" />
      </div>
      <p>Travels</p>
    </div>
    <div class="col-xs-4 gallery-item">
      <div class="album">
        <img src="http://lorempixel.com/400/400/business/" alt="" />
        <img src="http://lorempixel.com/400/400/food/" alt="" />
        <img src="http://lorempixel.com/400/400/transport/" alt="" />
      </div>
       <p>Working !</p>
    </div>
    <div class="col-xs-4 gallery-item">
      <div class="album">
        <img src="http://lorempixel.com/400/400/nightlife/" alt="" />
        <img src="http://lorempixel.com/400/400/technics/" alt="" />
        <img src="http://lorempixel.com/400/400/abstract/" alt="" />
      </div>
      <p>2012 - 2013</p>
    </div>
    <div class="col-xs-4 gallery-item">
      <div class="album">
        <img src="http://lorempixel.com/400/400/food/" alt="" />
        <img src="http://lorempixel.com/400/400/animals/" alt="" />
        <img src="http://lorempixel.com/400/400/cats/" alt="" />
      </div>
      <p>Stuff</p>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Pure CSS albums gallery CSS Codes

body {
  background-color: #00181F !important;
  padding: 0 100px;
}

#main h1 {
  color: #FFF;
  font-weight: 100;
  letter-spacing: 3px;
  padding: 40px 0 70px;
}
#main #gallery .gallery-item {
  height: 300px;
}
#main #gallery .gallery-item .album {
  position: relative;
  width: 80%;
  margin: auto;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#main #gallery .gallery-item .album img {
  width: 100%;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  border: 4px solid #FFF;
  -moz-box-shadow: 0 0 4px black;
  -webkit-box-shadow: 0 0 4px black;
  box-shadow: 0 0 4px black;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
  -moz-transform-origin: 50% 50% 50%;
  -ms-transform-origin: 50% 50% 50%;
  -webkit-transform-origin: 50% 50% 50%;
  transform-origin: 50% 50% 50%;
}
#main #gallery .gallery-item .album img:first-child {
  position: relative;
  z-index: 1000;
}
#main #gallery .gallery-item .album img:first-child + img {
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -webkit-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
#main #gallery .gallery-item .album img:last-child {
  -moz-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}
#main #gallery .gallery-item .album:hover {
  width: 85%;
}
#main #gallery .gallery-item .album:hover img {
  z-index: 2000;
}
#main #gallery .gallery-item .album:hover img:first-child {
  z-index: 3000;
}
#main #gallery .gallery-item .album:hover img:first-child + img {
  left: -40px;
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
#main #gallery .gallery-item .album:hover img:last-child {
  left: 40px;
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}
#main #gallery .gallery-item p {
  width: 100%;
  text-align: center;
  color: #FFF;
  padding-top: 20px;
}

Pure CSS albums gallery JS Codes

// NO JS here....
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.