FIDDLE: Cartões

HTML:

 <section class="sectionFirst py-5">    <div class="container">      <div class="row">        <div class="col-lg-6 col-12">         <div class="flex">            <h3 class="titulo">Nossos Serviços</h3>         </div>        </div>      </div>

      <div class="row mt-3">

        <div class="col-lg-3 col-12">        <a href="#" title="Acessar Serviço" rel="noopener noreferer nofollow">          <div class="serviceCard">            <img class="img-fluid" alt="Imagem Serviço" src="https://cdn.interago.com.br/img/jpg/w_0_q_8/1/mc/Noticia/Matérias/Cartões//pexels-chloe-1321916-min">

            <a class="serviceCardBox" href="#" title="Acessar Serviço">             <i class="fas fa-chevron-left"></i>

             <p class="dsc">Chole HairStyle</p>            </a>                  </div>          </a>        </div>           <div class="col-lg-3 col-12">        <a href="#" title="Acessar Serviço" rel="noopener noreferer nofollow">          <div class="serviceCard">            <img class="img-fluid" alt="Imagem Serviço" src="https://cdn.interago.com.br/img/jpg/w_0_q_8/1/mc/Noticia/Matérias/Cartões//pexels-chloe-1321916-min">

            <a class="serviceCardBox" href="#" title="Acessar Serviço">             <i class="fas fa-chevron-left"></i>

             <p class="dsc">Chole HairStyle</p>            </a>                  </div>          </a>        </div>           <div class="col-lg-3 col-12">        <a href="#" title="Acessar Serviço" rel="noopener noreferer nofollow">          <div class="serviceCard">            <img class="img-fluid" alt="Imagem Serviço" src="https://cdn.interago.com.br/img/jpg/w_0_q_8/1/mc/Noticia/Matérias/Cartões//pexels-chloe-1321916-min">

            <a class="serviceCardBox" href="#" title="Acessar Serviço">             <i class="fas fa-chevron-left"></i>

             <p class="dsc">Chole HairStyle</p>            </a>                  </div>          </a>        </div>           <div class="col-lg-3 col-12">        <a href="#" title="Acessar Serviço" rel="noopener noreferer nofollow">          <div class="serviceCard">            <img class="img-fluid" alt="Imagem Serviço" src="https://cdn.interago.com.br/img/jpg/w_0_q_8/1/mc/Noticia/Matérias/Cartões//pexels-chloe-1321916-min">

            <a class="serviceCardBox" href="#" title="Acessar Serviço">             <i class="fas fa-chevron-left"></i>

             <p class="dsc">Chole HairStyle</p>            </a>                  </div>          </a>        </div>            </div>    </div>  </section>

CSS:

/* SERVICE CARD */

.serviceCard{  margin-top:20px;  display:block;  position:relative;  transition:0.3s ease;  overflow:hidden;}

.serviceCard .box-product-image {  display:  block;  height: 100%;}

  .serviceCard img{    transition:0.3s ease;    object-fit:cover;    filter: grayscale(1);    width:100%;  }

  .serviceCard:hover img{    transform:scale(1.10);    filter: grayscale(0);  }

  .serviceCardBox{  position:absolute;  right:0;  bottom:0;  display: block;  padding: 20px;  background: #888;  width:20%;  transition:0.5s ease;  height:60px;  cursor:pointer;}

.serviceCard:hover .serviceCardBox{  background:#832036;}

@media(min-width:1000px){  .serviceCard{    height:100%;  }

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

@media(max-width:992px){  .serviceCardBox{  width:100%;  background:#832036;  }

  .serviceCard img{    width: 100%;    object-fit: cover;    filter:grayScale(0);  }

  .serviceCardBox i{  position:absolute;  left:90%;  transform:rotate(180deg);  bottom:22px;  animation-name: hide;  animation-duration: 1.5s;  }

  .serviceCardBox .dsc{  display:block;  font-size:16px;  color:white;  font-weight:600;  margin:0;  position:absolute;  bottom:0;  left:10px;  padding:20px;  animation-name: hide;  animation-duration: 1.5s;}}

.dsc{  display:none;}

.serviceCard:hover .serviceCardBox{  width:100%;}

.serviceCard:hover .serviceCardBox i{  position:absolute;  left:90%;  transform:rotate(180deg);  bottom:22px;  animation-name: hide;  animation-duration: 1.5s;}

.serviceCard:hover .serviceCardBox .dsc{  display:block;  font-size:16px;  color:white;  font-weight:600;  margin:0;  position:absolute;  bottom:0;  left:10px;  padding:20px;  animation-name: hide;  animation-duration: 1.5s;}

@keyframes hide {  from {opacity:0;}  to {opacity:1;}}

.serviceCardBox i {  color:#FFF;}

/* .serviceCardDsc p {  font-weight:500;}

.serviceCardDsc{  padding:10px;  margin-top:-5px;  background:#832036;  color:white;  display:flex;  justify-content:space-between;  align-items:center;}

.serviceCardDsc:hover{  transform:translateY(-8px);} */