Image / Album Gallery

In this example below you will see how to do a Image / Album Gallery with some HTML / CSS and Javascript

Clean & Responsive. Hover transitions for additional descriptions. Favorite counters. Top menu for categories.

Thumbnail
This awesome code was written by Codewoofy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Codewoofy ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Image / Album Gallery</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="content">
   <ul class="nav">
      <li><a href="#">City</a></li>
      <li><a href="#">Nature</a></li>
      <li><a href="#">People</a></li>
      <li><a href="#">Animals</a></li>
      <li><a href="#" class='active'>Random</a></li>
   </ul>
   <div class="gallery">
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 23</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=0" alt="" />
         <h2>Gallery Title</h2>
         <p>322 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 15</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=1" alt="" />
         <h2>Gallery Title</h2>
         <p>55 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 11</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=2" alt="" />
         <h2>Gallery Title</h2>
         <p>3 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 42</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=3" alt="" />
         <h2>Gallery Title</h2>
         <p>56 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 92</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=4" alt="" />
         <h2>Gallery Title</h2>
         <p>745 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 23</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=5" alt="" />
         <h2>Gallery Title</h2>
         <p>23 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 23</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=0" alt="" />
         <h2>Gallery Title</h2>
         <p>322 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 15</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=1" alt="" />
         <h2>Gallery Title</h2>
         <p>55 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 11</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=2" alt="" />
         <h2>Gallery Title</h2>
         <p>3 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 42</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=3" alt="" />
         <h2>Gallery Title</h2>
         <p>56 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 92</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=4" alt="" />
         <h2>Gallery Title</h2>
         <p>745 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
      <a href='#' class="item">
         <div class="stats">
            <span><i class="fa fa-heart"></i> 23</span>
         </div>
         <img src="http://placeimg.com/360/260/any?v=5" alt="" />
         <h2>Gallery Title</h2>
         <p>23 Photos</p>
         <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate eros sed tincidunt laoreet. Nullam in tempus est. Donec tempus neque a eros consectetur consequat.</p>
         </div>
      </a>
      
   </div>
</div>

<footer>
   Maybe see more at <a target="_blank" href="http://ksir.pw">ksir.pw</a>
</footer>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Codewoofy/image-album-gallery-BpBdqL */
body,
html {
   font-family: 'Roboto', sans-serif;
   font-size: 15px;
}

#content {
   background: #eee;
}

.nav {
   text-align: center;
   background: #FFF;
   -webkit-box-shadow: 0px 2px 2px 0px rgba(212, 212, 212, 1);
   -moz-box-shadow: 0px 2px 2px 0px rgba(212, 212, 212, 1);
   box-shadow: 0px 2px 2px 0px rgba(212, 212, 212, 1);
}

.nav li {
   display: inline-block;
}

.nav li a {
   display: block;
   font-size: 15px;
   padding: 15px;
   padding-bottom: 13px;
   color: #333;
   text-decoration: none;
   text-transform: uppercase;
   font-weight: bold;
   letter-spacing: 1px;
   border-bottom: solid 2px transparent;
}

.nav li a.active {
   border-color: #4097e6;
   color: #4097e6;
}

.nav li a:hover {
   color: #3984c7;
}

.gallery {
   padding: 20px;
   text-align: center;
   max-width: 1200px;
   margin: auto;
}

.item {
   display: inline-block;
   text-decoration: none;
   background: #FFF;
   margin: 10px;
   -webkit-box-shadow: 2px 2px 2px 0px rgba(212, 212, 212, 1);
   -moz-box-shadow: 2px 2px 2px 0px rgba(212, 212, 212, 1);
   box-shadow: 2px 2px 2px 0px rgba(212, 212, 212, 1);
   position: relative;
}

.item img{
   width: 360px;
   height: 260px;
}

.item .stats {
   font-size: 13px;
   position: absolute;
   bottom: 10px;
   left: 10px;
   color: #555;
}

.item .stats i {
   transition: color 250ms;
   -webkit-transition: color 250ms;
   -moz-transition: color 250ms;
   -o-transition: color 250ms;
}

.item .stats span:hover .fa-heart {
   color: red;
}

.item h2 {
   padding: 10px;
   padding-bottom: 0;
   font-size: 20px;
   color: #333;
}

.item p {
   font-size: 15px;
   padding: 10px;
   padding-bottom: 20px;
   color: silver;
}

.item .description {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   color: #eee;
   height: 260px;
   background: rgba(0, 0, 0, .7);
   width: 0;
   padding: 0;
   overflow: hidden;
   transition: width 500ms;
   -webkit-transition: width 500ms;
   -moz-transition: width 500ms;
   -o-transition: width 500ms;
}

.item .description p {
   width: 320px;
   display: block;
   padding: 20px;
}

.item:hover .description {
   width: 360px;
}

footer {
   color: silver;
   -webkit-box-shadow: 0px -2px 2px 0px rgba(212, 212, 212, 1);
   -moz-box-shadow: 0px -2px 2px 0px rgba(212, 212, 212, 1);
   box-shadow: 0px -2px 2px 0px rgba(212, 212, 212, 1);
   padding: 22px;
   text-transform: uppercase;
   font-weight: bold;
   letter-spacing: 1px;
   font-size: 11px;
}

footer a {
   text-decoration: none;
   color: inherit;
   display: inline-block;
   border-bottom: solid 1px rgba(0, 0, 0, .1);
}

footer a:hover {
   color: #333;
}

Comments