JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="img-card">
    <img src="/static/rock1.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock2.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock3.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock4.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock5.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock6.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
</div>

CSS

.container{
    
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .img-card{
      width: 100%;
      height: 250px;
      margin: 0;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      border: 1px solid red;
    }

  .img-card:nth-child(1){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card:nth-child(2){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card:nth-child(3){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    transition: all 1s;
  }
  .img-card:nth-child(1)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(2)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(3)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(4)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(5)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(6)::before{background-color: rgba(223, 223, 223, 0.9);}


  .img-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(-100%);
  transition: all 1s;
}
.img-card:nth-child(1) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);
  }
  .img-card:nth-child(2) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(3) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(4) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(5) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(6) .content{
    box-shadow: 0 10px 20px...