A Bootstrap card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options. Bootstrap cards replace old Bootstrap panels, Bootstrap wells, and Bootstrap thumbnails.
Html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
</head>
<body>
<br>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="service-card">
<div class="card">
<i class="fab fa-codepen"></i>
<h3>xdflix</h3>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
<br>
</body>
</html> (code-box)
Css
.service-card{
text-align: center;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, .1);
-o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, .1);
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, .1);
margin-bottom: 10%;
}
.service-card:hover{
box-shadow: 4px 4px 4px rgba(58, 105, 243, 0.3);
-webkit-transform: translate(0, -8px);
-moz-transform: translate(0, -8px);
-ms-transform: translate(0, -8px);
-o-transform: translate(0, -8px);
transform: translate(0, -8px);
box-shadow: 0 40px 40px rgba(0, 0, 0, 0.2);
}
.service-card i{
font-size: 150px;
padding: 10% 0;
background-color: #f3f3f3;
color: #31D0D4;
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.service-card:hover i{
color: #fff;
transition: all ease-in-out 0.5s;
}
.service-card i:after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
transform: scaleY(0);
transform-origin: bottom center;
background: linear-gradient(to left,#8487E2,#31D0D4,#31D0D4,#8487E2);
z-index: -1;
transition: transform 0.5s;
}
.service-card:hover i::after {
transform: scaleY(1);
}
.service-card h3{
margin-top: 2%;
font-size: 44px;
font-weight: bold;
color: #464646;
}(code-box)
