CodePen Embed - hover card effect testing/personal use only

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">

    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">  
</head>
<body>
  

  <section class="section__main">
    <figure class="figure__card">
      <img src='https://th-thumbnailer.cdn-si-edu.com/21GENipD1iCQImA3OwP70uYpHzo=/fit-in/1072x0/https://tf-cmsv2-photocontest-smithsonianmag-prod-approved.s3.amazonaws.com/8699797a-87c7-4cbf-9b8f-180ff4a68793.jpg' class="figure__card--image">
      <figcaption class="figure__card--caption">
        <div>
          <h5>arcana supra omnia</h5>
          <h5>by marcela alessandra</h5>
        </div>
        <div>
          <h3>The Fox</h3>
        </div>
      </figcaption>
      
    </figure>
    <figure class="figure__card">
      <img src='https://i.pinimg.com/564x/c7/2a/3e/c72a3e5e1d32095f1ef97240f78d0ddc.jpg' class="figure__card--image">
      <figcaption class="figure__card--caption">
        <div>
          <h5>arcana supra omnia</h5>
          <h5>by marcela alessandra</h5>
        </div>
        <div>
          <h3>The Stag</h3>
        </div>
      </figcaption>
      
    </figure>
    <figure class="figure__card">
      <img src='https://i.pinimg.com/564x/35/c2/59/35c259d220450802054a7106a304d1a6.jpg' class="figure__card--image">
      <figcaption class="figure__card--caption">
        <div>
          <h5>arcana supra omnia</h5>
          <h5>by marcela alessandra</h5>
        </div>
        <div>
          <h3>The Raven</h3>
        </div>
      </figcaption>
      
    </figure>
    <figure class="figure__card">
      <img src='https://i.pinimg.com/564x/7f/e6/e6/7fe6e64e35d6b9c3401a1f8c58f4e46e.jpg' class="figure__card--image">
      <figcaption class="figure__card--caption">
        <div>
          <h5>arcana supra omnia</h5>
          <h5>by marcela alessandra</h5>
        </div>
        <div>
          <h3>The Viper</h3>
        </div>
      </figcaption>
      
    </figure>
    <figure class="figure__card">
      <img src='https://i.pinimg.com/564x/20/86/8f/20868f28fbbb571eeb5dfae255c1c12a.jpg' class="figure__card--image">
      <figcaption class="figure__card--caption">
        <div>
          <h5>arcana supra omnia</h5>
          <h5>by marcela alessandra</h5>
        </div>
        <div>
          <h3>The Wolf</h3>
        </div>
      </figcaption>
      
    </figure>
    <figure class="figure__card">
      <img src='https://i.pinimg.com/564x/71/4e/8f/714e8f499330b7f4193e79626b3c0aa6.jpg' class="figure__card--image">
      <figcaption class="figure__card--caption">
        <div>
          <h5>arcana supra omnia</h5>
          <h5>by marcela alessandra</h5>
        </div>
        <div>
          <h3>The Tiger</h3>
        </div>
      </figcaption>
      
    </figure>
    <figure class="figure__card">
      <img src='https://i.pinimg.com/564x/af/c2/ff/afc2ff7dc989e2169487fabf37ce5329.jpg' class="figure__card--image">
      <figcaption class="figure__card--caption">
        <div>
          <h5>arcana supra omnia</h5>
          <h5>by marcela alessandra</h5>
        </div>
        <div>
          <h3>The Spider</h3>
        </div>
      </figcaption>
      
    </figure>
    <figure class="figure__card">
      <img src="https://i.pinimg.com/564x/b9/c8/bc/b9c8bc831c938e657737d1199d97818a.jpg" class="figure__card--image">
      <figcaption class="figure__card--caption">
        <div>
          <h5>arcana supra omnia</h5>
          <h5>by marcela alessandra</h5>
        </div>
        <div>
          <h3>The Owl</h3>
        </div>
      </figcaption>
      
    </figure>
    <figure class="figure__card">
      <img src="https://i.pinimg.com/564x/81/e2/a0/81e2a0231c6729a3f1f5db87d229acc8.jpg" class="figure__card--image">
      <figcaption class="figure__card--caption">
        <div>
          <h5>arcana supra omnia</h5>
          <h5>by marcela alessandra</h5>
        </div>
        <div>
          <h3>The Orca</h3>
        </div>
      </figcaption>
      
    </figure>
  </section>

  
</body>

/*
 * Core Styling
 */ 

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  box-sizing: border-box;
  background: #1d1d1d;
  background: linear-gradient(45deg, #1d1d1d 0%, #222222 100%);
  color: #efefef;
}

html { font-size: 62.5%; }

h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3.8rem;
  font-weight: 400;
  line-height: 120%;
}

h2 {
  font-family: 'Lato', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 120%;
  margin-bottom: .5rem;
}

h3 {
  font-family: 'Playfair Display', serif;
  text-transform: capitalize;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 120%;
  text-shadow: 0 4px 8px rgba(0,0,0,.25);
}

h5 {
  font-family: 'Lato', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 120%;
}

p, a {
  font-family: 'Lato', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 120%;
}

a {
  color: #b9b9b9;
  text-decoration: none;
  transition: all .45s ease-out;
}

a:hover, a:focus {
  color: #ecf0f1;
}
        

/*
 * Header Section
 */ 

.section__header {
  padding: 2.5rem;
  text-align: center;
}

/* 
 * Main Section
 */

.section__main {
  width: 100%;
  text-align: center;
  padding: 0 2.5rem;
}

.figure__card {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: 1.5rem;
  height: 400px;
  width: 300px;
  background: #000000;
  text-align: left;
  box-shadow: 0 15px 35px rgba(0,0,0,.25);
  
  * {
    transition: all .45s ease-out;
  }
  
  &--image {
    opacity: .8;
    width: 100%;
    vertical-align: top;
    transition: opacity .45s;
  }
  
  &--caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    > div {
      position: relative;
      width: 100%;
      height: 50%;
      overflow: hidden;
    }
  }
  
  h3, h5 {
    position: absolute;
    left: 0;
    margin: 0;
    padding: 0 2.5rem;
    text-transform: uppercase;
  }
  
  h3 {
    top: 0;
    text-transform: capitalize;
    font-weight: 400;
  }
  
  h5 {
    bottom: 0;
    font-weight: 700;
    
    &:nth-of-type(2) {
      opacity: 0;
      transform: translateY(150%);
    }
  }
  
  &--link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  &:hover, &:focus {
    .figure__card--image {
      opacity: .3;
      filter: grayscale(100%);
    }
    
    .figure__card--caption {
      h5 {
        &:first-of-type {
          transform: translateY(150%);
          opacity: 0;
        }
        
        &:nth-of-type(2) {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }
}

/* 
 * Footer Section
 */ 

.section__footer {
  text-align: center;
  padding: 2.5rem;
}

/* 
 * Media Queries 
 */ 

@media screen and (max-width: 320px) {
  .section__main {
    width: 100%;
    padding: 0;
  }
  
  .figure__card {
    max-width: 255px;
  }
}

View Compiled

Run Pen

This Pen is owned by April on CodePen.

See more by @ishysquishy on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.