Как добавить изначальную надпись на картинку которая потом будет пропадать при наведении?

 .img-card{
      width: 106.5%;
      height: 100%;
      margin: 0px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      }


      .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 rgba(5, 1, 59, 0.2);;
      }
      .content h2,.content p{
      opacity: 0;
      transition: all 0.3s;
      color: #FAFAFA;
      }
      .content h2{
      letter-spacing: 1px;
      }
      .content p{
      font-size: 12px;
      }

      .img-card:hover::before{transform: translateY(95%);}

      .img-card:hover .content {transform: none;}

      .img-card:hover h2{
      opacity: 1;
      transition-delay: 0.3s;
      }

      .img-card:hover p{
      opacity: 1;
      transition-delay: 0.3s;
      }

 <div class = "row">
    <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock1.jpg" alt="Текст 1"><p>hello</p>
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
                  <button class="open" data-modal="modal1">About App</button>
                  <div id="modal1" class="modal">
                    <div class="modal-content" style="background: rgba(0, 0, 0, 0.6);">
                      <span class="close" data-modal="modal1">&times;</span>
                      <h3 style="color: white">Контент 1</h3>
                    </div>
                  </div>
            </div>
          </div>
        </div>
    
    <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock2.jpg" alt="Текст 2"> <p>hello</p>
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button class="open" data-modal="modal2">About App</button>
                  <div id="modal2" class="modal">
                    <div class="modal-content" style="background: rgba(0, 0, 0, 0.6);">
                      <span class="close" data-modal="modal2">&times;</span>
                      <h3 style="color: white">Контент 2</h3>
                    </div>
                  </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock3.jpg" alt="Текст 3"> <p>hello</p>
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button class="open" data-modal="modal3">About App</button>
          <div id="modal3" class="modal">
            <div class="modal-content" style="background: rgba(0, 0, 0, 0.6);">
              <span class="close" data-modal="modal3">&times;</span>
              <h3 style="color: white">Контент 3</h3>
                    </div>
                  </div>
        </div>
      </div>
    </div>

<div class = "row">
  <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock5.jpg" alt="Текст 4">
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button class="open" data-modal="modal4">About App</button>
                  <div id="modal4" class="modal">
                    <div class="modal-content" style="background: rgba(0, 0, 0, 0.6);">
                      <span class="close" data-modal="modal4">&times;</span>
                      <h3 style="color: white">Контент 4</h3>
                    </div>
                  </div>
        </div>
      </div>
  </div>
  <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock4.jpg" alt="Текст 5">
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button class="open" data-modal="modal5">About App</button>
          <div id="modal5" class="modal">
            <div class="modal-content" style="background: rgba(0, 0, 0, 0.6);">
              <span class="close" data-modal="modal5">&times;</span>
              <h3 style="color: white">Контент 5</h3>
                    </div>
                  </div>
        </div>
      </div>
  </div>
  <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock6.jpg" alt="Текст" >
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button class="open" data-modal="modal6">About App</button>
          <div id="modal6" class="modal">
            <div class="modal-content" style="background: rgba(0, 0, 0, 0.6);">
              <span class="close" data-modal="modal6">&times;</span>
              <h3 style="color: white">Контент 6</h3>
            </div>
          </div>
        </div>
      </div>
        </div>
      </div>