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));
}