Cartões Estilo 01 - Comp. Interago

Cartões com imagem e legenda + hover background

by francisco_negrao

HTML

<link rel="stylesheet" href="https://componentes.interago.com.br/bootstrap-grid.css">
<link rel="stylesheet" href="https://componentes.interago.com.br/global-css.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css">
<div class="container">

  <div class="row">
  
    <div class="col-lg-4 col-6 pb-4">
      <div class="i-box-card-01">
        <a href="#" title="TÍTULO PARA ONDE VAI MEU LINK">
      
        <div class="img-box">
        
          <img src="https://images.unsplash.com/photo-1572802419224-296b0aeee0d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1115&q=80" class="img-fluid" alt="COLOCAR ALT DE ACORDO COM IMAGEM" loading="lazy" />
        
        </div>
        
        <div class="title-box">
        
          <h2>
            Nome do meu serviço <i class="fas fa-chevron-right"></i>
          </h2>
        
        </div>
        </a>
      </div>
    </div>
    
 <div class="col-lg-4 col-6 pb-4">
      <div class="i-box-card-01">
        <a href="#" title="TÍTULO PARA ONDE VAI MEU LINK">
      
        <div class="img-box">
        
          <img src="https://images.unsplash.com/photo-1572802419224-296b0aeee0d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1115&q=80" class="img-fluid" alt="COLOCAR ALT DE ACORDO COM IMAGEM" loading="lazy" />
        
        </div>
        
        <div class="title-box">
        
          <h2>
            Nome do meu serviço <i class="fas fa-chevron-right"></i>
          </h2>
        
        </div>
        </a>
      </div>
    </div>
    
    <div class="col-lg-4 col-6 pb-4">
      <div class="i-box-card-01">
        <a href="#" title="TÍTULO PARA ONDE VAI MEU LINK">
      
        <div class="img-box">
        
          <img...

CSS

body {
  margin: 100px 0px;
}

.i-box-card-01 {
  box-shadow: 10px 20px 50px #00000029;
}

.i-box-card-01 .title-box {
    color: #fff;
    background-color: #00afef;
    padding: 20px;
}

.i-box-card-01 .title-box h2 {
    font-size: 20px;
    font-weight: 500;
    margin: 0px;
}

.i-box-card-01 .title-box i {
    vertical-align: middle;
    font-size: 15px;
    margin-left: 8px;
    transition: all 0.3s ease-in-out;
}

.i-box-card-01 .img-box {
  overflow: hidden;
}

.i-box-card-01 .img-box img {
    object-fit: cover;
    object-position: center;
    height: 310px;
    width: 100%;
    max-height: 100%;
    display: block;
    transition: all 0.3s ease-in-out;
}

.i-box-card-01 a:hover .img-box img {
  transform: scale(1.10);
}

.i-box-card-01 a:hover .title-box i {
   transform: translateX(5px);
}

/* Media for Mobile - Cards s01 Interago */

@media (max-width: 992px) {
  .i-box-card-01 .title-box h2 {
    font-size: 14px;
  }
  .i-box-card-01 .img-box img {
    object-fit: cover;
    object-position: center;
    height: 175px;
    width: 100%;
    max-height: 100%;
    display: block;
    transition: all 0.3s ease-in-out;
  }
}