Card hover effect ep03 – Bootstrap4

Card hover effect ep03 – 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="section4 w-100 text-center">
      <h3 class="display-5 text-success Mreflect mb-5">[S4]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 Mscale" style="--Mscale : 1.5">
            <img src="images/9.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100 bg-primary">
              <h5 class="card-title font-weight-bold text-light">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
          </div>
        </div>

        <div class="p-1">
          <div class="card border-0 Mscale" style="--Mscale : 2">
            <img src="images/10.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100 bg-primary">
              <h5 class="card-title font-weight-bold text-light">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
          </div>
        </div>

        <div class="p-1">
          <div class="card border-0 Mscale" style="--Mscale : 1.2">
            <img src="images/11.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100 bg-primary">
              <h5 class="card-title font-weight-bold text-light">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
          </div>
        </div>

        <div class="p-1">
          <div class="card border-0 Mscale" style="--Mscale : 1.8">
            <img src="images/12.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100 bg-primary">
              <h5 class="card-title font-weight-bold text-light">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
          </div>
        </div>
        



      </div>
    </div>
  </div>
</div> 

scss

.Mscale{
    transition: .5s cubic-bezier(0.76, -0.76, 0.29, 1.79);
    &:hover{
        transform: scale(var(--Mscale));
        z-index: 300;
    }
}

Bootstrap4 theming ep01

Bootstrap4 theming ep02