Card hover effect ep02 – Bootstrap4

Card hover effect ep02 – Bootstrap4

HTML

<div class="contents bg-primary overflow-hidden">
  <div class="container d-flex justify-content-center align-items-center text-success h-100">
    <div class="section3 w-100 text-center">
      <h3 class="display-5 text-success Mreflect mb-5">[S3]Card hover effect - Bootstrap4</h3>
      <div class="row row-cols-md-4 row-cols-sm-2 ">
        <div class="p-1">
          <div class="card border-0">
            <img src="images/5.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100">
              <h5 class="card-title font-weight-bold text-light">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
            <div class="card-footer font-weight-bold bg-primary">
              <p>Lorem ipsum</p>
            </div>
          </div>
        </div>
        <div class="p-1">
          <div class="card border-0">
            <img src="images/6.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100">
              <h5 class="card-title font-weight-bold text-light">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
            <div class="card-footer font-weight-bold bg-primary">
              <p>Lorem ipsum</p>
            </div>
          </div>          
        </div>
        <div class="p-1">
          <div class="card border-0">
            <img src="images/7.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100">
              <h5 class="card-title font-weight-bold text-light">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
            <div class="card-footer font-weight-bold bg-primary">
              <p>Lorem ipsum</p>
            </div>
          </div>          
        </div>
        <div class="p-1">
          <div class="card border-0">
            <img src="images/8.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100">
              <h5 class="card-title font-weight-bold text-light">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
            <div class="card-footer font-weight-bold bg-primary">
              <p>Lorem ipsum</p>
            </div>
          </div>          
        </div>
      </div>
    </div>
  </div>
</div> 

scss

    .section3{
        .card{
            overflow: hidden;
            cursor: pointer;
            .card-body{
                
                transition: .5s ease-in-out;
                position: absolute;
                top: -200px;
            }
            img{
                transition: .5s ease-in-out;
            }

            &:hover{
                .card-body{
                    top: 0;
                    background-color: rgba(0,0,0,0.6);
                }
                img{
                    transform: scale(1.5);
                }

            }
        }
    }

.Mreflect {
    -webkit-box-reflect: below -4px linear-gradient(transparent, rgba(255,255,255,0.2));
}

Bootstrap4 theming ep01

Bootstrap4 theming ep02