<div class="images-container">

  <div class="image-card">

    <img src="https://picsum.photos/id/84/1280/848" alt="" />

    <span class="image-text"> Text 1 </span>

  </div>

​

  <div class="image-card">

    <img src="https://picsum.photos/id/103/1280/848" alt="" />

    <span class="image-text"> Text 2 </span>

  </div>

​

  <div class="image-card">

    <img src="https://picsum.photos/id/201/1280/848" alt="" />

    <span class="image-text"> Text 3 </span>

  </div>

​

  <div class="image-card">

    <img src="https://picsum.photos/id/219/1280/848" alt="" />

    <span class="image-text"> Text 4 </span>

  </div>

</div>

* {

  box-sizing: border-box;

}

​

body {

  margin: 0;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  padding: 100px;

}

​

.images-container {

  max-width: 400px;

  width: 100%;

  display: grid;

  justify-content: center;

  align-items: center;

  gap: 20px;

  width: 100%;

  grid-template-columns: repeat(2, 1fr);

}

​

.image-card {

  width: 300px;

  height: 250px;

  border-radius: 20px;

  overflow: hidden;

  position: relative;

}

​

.image-card .image-text {

  position: absolute;

  bottom: -80px;

  opacity: 0;

  width: 100%;

  left: 0;

  background-color: white;

  font-family: Poppins;

  text-align: center;

  padding: 20px;

  font-size: 18px;

  font-weight: bold;

  transition: bottom 300ms, opacity 300ms;

  backdrop-filter: blur(5px);

  background-color: color-mix(in srgb, white, transparent 30%);

}

​

.image-card:hover .image-text {

  bottom: 0;

  opacity: 1;

}

​

.image-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: filter 300ms;

}

​