Card hover effect – Bootstrap4
CSS Card hover effect – Bootstrap4
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="main.js"></script>
</head>
<body>
<div class="contents bg-primary overflow-hidden">
<div class="container d-flex justify-content-center align-items-center text-success h-100">
<div class="section1 display-4 font-weight-bolder">
<span style="--Mdelay : 1">c</span>
<span style="--Mdelay : 2">s</span>
<span style="--Mdelay : 3">s</span>
<span style="--Mdelay : 4">C</span>
<span style="--Mdelay : 5">u</span>
<span style="--Mdelay : 6">s</span>
<span style="--Mdelay : 7">t</span>
<span style="--Mdelay : 8">o</span>
<span style="--Mdelay : 9">m</span>
<span style="--Mdelay : 10">P</span>
<span style="--Mdelay : 11">r</span>
<span style="--Mdelay : 12">o</span>
<span style="--Mdelay : 13">p</span>
<span style="--Mdelay : 14">e</span>
<span style="--Mdelay : 15">r</span>
<span style="--Mdelay : 16">t</span>
<span style="--Mdelay : 17">i</span>
<span style="--Mdelay : 18">e</span>
<span style="--Mdelay : 19">s</span>
</div>
</div>
</div>
<div class="contents bg-primary overflow-hidden">
<div class="container d-flex justify-content-center align-items-center text-success h-100">
<div class="section2 w-100 text-center">
<h3 class="display-5 text-success Mreflect mb-5">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/1.jpg" class="card-img-top" alt="...">
<div class="card-body bg-primary">
<h5 class="card-title">Card title</h5>
<p class="card-text"><small class="text-muted">Lorem ipsum</small></p>
</div>
<div class="card-footer font-weight-bold">
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="p-1">
<div class="card border-0">
<img src="images/2.jpg" class="card-img-top" alt="...">
<div class="card-body bg-primary">
<h5 class="card-title">Card title</h5>
<p class="card-text"><small class="text-muted">Lorem ipsum</small></p>
</div>
<div class="card-footer font-weight-bold">
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="p-1">
<div class="card border-0">
<img src="images/3.jpg" class="card-img-top" alt="...">
<div class="card-body bg-primary">
<h5 class="card-title">Card title</h5>
<p class="card-text"><small class="text-muted">Lorem ipsum</small></p>
</div>
<div class="card-footer font-weight-bold">
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="p-1">
<div class="card border-0">
<img src="images/4.jpg" class="card-img-top" alt="...">
<div class="card-body bg-primary">
<h5 class="card-title">Card title</h5>
<p class="card-text"><small class="text-muted">Lorem ipsum</small></p>
</div>
<div class="card-footer font-weight-bold">
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>SCSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
$font-family-base: 'Roboto', sans-serif;
$enable-responsive-font-sizes: true;
$color-1:#0f4c81;
$color-2:#ed6663;
$color-3:#00ffff;
$color-4:#1b262c;
$color-5: #ff0000;
$primary: $color-1;
$secondary: $color-2;
$success: $color-3;
$warning: $color-4;
$danger: $color-5;
$dark:#333333;
// $enable-gradients : true;
/*
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
*/
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1200px
);
@import "scss/bootstrap";
html{
font-size: 17.24px;
letter-spacing: -0.03em;
word-spacing: 0.05em;
//letter-spacing: -0.4em;
}
a{
text-decoration: none !important;
}
.contents{
height: 100vh;
background: linear-gradient(to top, darken($primary, 20%), $primary);
.section1{
-webkit-box-reflect: below -10px linear-gradient(transparent, rgba(23,35,58,0.2));
transform-style: preserve-3d;
transform: perspective(600px) rotatex(0deg) rotateY(60deg);
//margin-right: -200px;
span{
//position: relative;
display: inline-block;
//animation: ani1 2s ease-in-out infinite;
animation: ani2 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;;
animation-delay: calc(0.03s * var(--Mdelay));
}
}
.section2{
.card{
overflow: hidden;
cursor: pointer;
img{
transition: .5s ease-in-out;
transform: scale(1.7);
}
.card-body{
transition: .5s ease-in-out;
transform: translateY(50px);
}
.card-footer{
transition: .5s ease-in-out;
background-color: lighten($color-1,20%);
}
&:hover {
img{
transform: scale(1);
}
.card-body{
transform: translateY(0px);
}
.card-footer{
background-color: $color-3;
color: $color-1;
}
}
}
}
}
.Mreflect {
-webkit-box-reflect: below -4px linear-gradient(transparent, rgba(255,255,255,0.2));
}
@keyframes ani1 {
0%{
transform: translateY(0px);
}
50%{
transform: translateY(-40px) scale(1.4);
filter: blur(4px) ;
}
}
@keyframes ani2 {
0%{
transform: translate3d(0, 0, 0)
}
50%{
transform: translate3d(20px, 0, 0) scale(1.6) rotateY(300deg);
filter: blur(2px) ;
color: $yellow;
padding : 2px;
}
}