<section>
  <h2>Animated CSS Thumbnail gallery</h2>
  <p>Hover over each image :D</p>
  <div class="gallery">
    <figure>
      <img src="https://picsum.photos/500/500">
      <figcaption>
        <h3>Random Image</h3>
        <div class="additional">
          <p>Things go here</p>
          <a href="#">Click Me!</a>
          <a href="#">Click Me also!</a>
        </div>
      </figcaption>
    </figure>
        <figure>
      <img src="https://picsum.photos/500/500">
      <figcaption>
        <h3>Random Image</h3>
        <div class="additional">
          <p>Things go here</p>
          <a href="#">Click Me!</a>
          <a href="#">Click Me also!</a>
        </div>
      </figcaption>
    </figure>
        <figure>
      <img src="https://picsum.photos/500/500">
      <figcaption>
        <h3>Random Image</h3>
        <div class="additional">
          <p>Things go here</p>
          <a href="#">Click Me!</a>
          <a href="#">Click Me also!</a>
        </div>
      </figcaption>
    </figure>
        <figure>
      <img src="https://picsum.photos/500/500">
      <figcaption>
        <h3>Random Image</h3>
        <div class="additional">
          <p>Things go here</p>
          <a href="#">Click Me!</a>
          <a href="#">Click Me also!</a>
        </div>
      </figcaption>
    </figure>
  </div>
</section>
@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
  font-family: 'Montserrat';
}

section {
  padding: 1em;
  
  h2 {
    font-size: 2em;
    margin-bottom: 0;
  }
  p {
    font-size: 1.3em;
    margin: 0 0 2em 0;
  }
  
  .gallery {
    display: grid;
    grid-template-columns: repeat(4, auto);
    
    figure {
      margin: 3px;
      overflow: hidden;
      position: relative;
      background-color: blue;
      transition: background-color .5s;
      
      &:hover {
        background: black;
        
        &:hover img {
          transform: translate3d(0,0,0) scale(1);
          opacity: 0.4;
        }
        
        &:hover .additional {
          opacity: 1;
          transform: scale(1);
        }
      }
      
      &:first-child {
        margin-left: 0;
      }
      
      img {
        width: calc(100% + 60px);
        opacity: .7;
        transform: translate3d(0, -20px, 0) scale(1.12);
        transition: all .5s
      }
      
      figcaption {
        position: absolute;
        padding: 1em 2em;
        top: 0;
        left: 0;
        right: 0;
        color: white;
        text-align: center;
        
        h3 {
          font-weight: bold;
          font-size: 1.2em;
          text-transform: uppercase;
          background: black;
          display: inline-block;
          padding: .5em .7em;
        }
        
        .additional {
          opacity: 0;
          transform: scale(1.3);
          transition: all .5s;
          
          p {
            margin-bottom: 20px;
            margin-top: 20px;
          }
          
          a {
            display: inline-block;
            background: white;
            text-decoration: none;
            text-transform: uppercase;
            padding: .5em;
            font-weight: bold;
            color: black;
            border-radius: 4px;
            
            &:hover {
              background-color: rgb(200,200, 200);
            }
            
            &:last-child {
              background: none;
              border: 1px solid white;
              color: white;
              margin-left: 5px;
              margin-top: 10px;
              &:hover {
                background: white;
                color: black;
              }
            }
          }
        }
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.