<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
  <!-- Code by Angela Delise  
 https://codepen.io/angeladelise/pen/rNWZvWo?editors=0100 -->

</head>

<body>
  <div class="gallery">
    <div class="card">
      <img src="https://images.unsplash.com/photo-1548689551-5be7ab3f02c4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" class="card__img">
      <div class="card__details">
        <h2>Summerland</h2>
      </div>
    </div>

    <div class="card">
      <img class="card__img" src='https://images.unsplash.com/photo-1596465650761-1bf264453052?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
      <div class="card__details">
        <h2>Ocean Breeze</h2>
      </div>
    </div>

    <div class="card">
      <img class="card__img" src='https://images.unsplash.com/photo-1568742344695-bd4cae66128c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
      <div class="card__details">
        <h2>Shoreline</h2>
      </div>
    </div>

    <div class="card"><img class="card__img" src='https://images.unsplash.com/photo-1578236925422-d4266db58d53?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
      <div class="card__details">
        <h2>Mountain View</h2>
      </div>
    </div>

    <div class="card">
      <img class="card__img" src='https://images.unsplash.com/photo-1583152607718-1ef10f410528?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
      <div class="card__details">
        <h2>Ocean Blues</h2>
      </div>
    </div>

    <div class="card">
      <img class="card__img" src='https://images.unsplash.com/photo-1554393478-7e87effa46ed?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
      <div class="card__details">
        <h2>Village Center</h2>
      </div>
    </div>

    <div class="card">
      <img class="card__img" src='https://images.unsplash.com/photo-1588224133371-fb0d2a94a6d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
      <div class="card__details">
        <h2>Beach Vibes</h2>
      </div>
    </div>

    <div class="card">
      <img class="card__img" src='https://images.unsplash.com/photo-1601344461488-cd5d00acf751?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
      <div class="card__details">
        <h2>Valley Dreams</h2>
      </div>
    </div>

    <div class="card">
      <img class="card__img" src='https://images.unsplash.com/photo-1590057984752-4a1da8cb2fad?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
      <div class="card__details">
        <h2>Highland</h2>
      </div>
    </div>
  </div>
</body>

<!-- 


 
-->
/*   color variables */
$clr-primary: #0e48fe;
$clr-primary-hover: #29e6a7;
$clr-primary-dark: #039d69;
$clr-gray100: #f9fbff;
$clr-gray150: #f4f6fb;
$clr-gray200: #eef1f6;
$clr-gray300: #e1e5ee;
$clr-gray400: #767b91;
$clr-gray500: #4f546c;
$clr-gray600: #2a324b;
$clr-gray700: #161d34;
$clr-gray800: #0c101d;

/*   border radius */
$radius: 0.2rem;

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

body {
  font-family: "Open Sans", sans-serif;
  height: 100vh;
  background-color: $clr-gray100;
  margin: 2rem;
}

.gallery {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 0.3fr));
  grid-auto-rows: 12rem;
  gap: 0.5rem;
}

.card {
  overflow: hidden;
  border-radius: $radius;
  cursor: pointer;
  position: relative;

  &__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms ease-out;
  }

  &__details {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px) brightness(1.3);
    padding: 0.5rem;
    opacity: 0;
    transition: opacity 350ms;

    h2 {
      text-align: center;
      line-height: 1.5rem;
      color: $clr-gray100;
      text-shadow: 0 0 20px $clr-gray700, 0 0 5px $clr-gray500;
      position: relative;
      top: 1rem;
      transition: top 350ms;
    }
  }

  //Card Hover Effects
  &:hover img {
    transform: scale(1.1);
  }

  &:hover &__details {
    opacity: 1;
  }

  &:hover &__details h2 {
    top: 0;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.