<div class="images-container">

  <div class='image-card'>

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

    <div class='text-block'>

      <p>

        Some Text 1

      </p>

    </div>

​

  </div>

​

  <div class='image-card'>

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

    <div class='text-block'>

      <p>

        Some Text 2

      </p>

    </div>

  </div>

</div>

​

<p>Hover on any box</p>

* {

  box-sizing: border-box;

}

​

body {

  margin: 0;

  padding: 20px; 

  font-family: Poppins;

}

​

.images-container {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 20px;

  width: 100%;

}

​

​

.image-card {

  width: 300px;

  height: 200px;

  border-radius: 20px;

  overflow: hidden;

  position: relative;

}

​

.image-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 300ms;

}

​

.image-card:hover img {

  transform: scale(1.4);

}

​

.image-card:hover .text-block {

  background-color: color-mix(

    in srgb,

    black,

    transparent 60%

  );

}

​

.image-card:hover .text-block p {

  opacity: 1;

  font-size: 20px;

}

​

.image-card .text-block {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transition: background-color 300ms;

  display: flex;

  justify-content: center;

  align-items: center;

}

​

.image-card .text-block p {

  color: white;

  font-size: 14px;

  transition: opacity 300ms, font-size 300ms;

  opacity: 0;

}

​

​

p {

  text-align: center;

}