Hello guys in this tutorial we will create animated card using HTML & CSS
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Profile Cards</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="profile-card">
<div class="container">
<h2 class="heading">Animated Profile Cards</h2>
<div class="card-grid">
<div class="card card0">
<div class="overlay">
<div class="content">
<h2>Kratos</h2>
<p>"From This Night Forward, The Mark Of Your Terrible Deed Will Be Visible To All. The Ashes Of Your Wife And Child Will Remain Fastened To Your Skin, Never To Be Removed."</p>
<a class="learn-more-btn" href="#">Learn More</a>
</div>
<div class="icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
<div class="card card1">
<div class="overlay">
<div class="content">
<h2>Kratos</h2>
<p>"From This Night Forward, The Mark Of Your Terrible Deed Will Be Visible To All. The Ashes Of Your Wife And Child Will Remain Fastened To Your Skin, Never To Be Removed."</p>
<a class="learn-more-btn" href="#">Learn More</a>
</div>
<div class="icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
<div class="card card2">
<div class="overlay">
<div class="content">
<h2>Kratos</h2>
<p>"From This Night Forward, The Mark Of Your Terrible Deed Will Be Visible To All. The Ashes Of Your Wife And Child Will Remain Fastened To Your Skin, Never To Be Removed."</p>
<a class="learn-more-btn" href="#">Learn More</a>
</div>
<div class="icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
<div class="card card3">
<div class="overlay">
<div class="content">
<h2>Kratos</h2>
<p>"From This Night Forward, The Mark Of Your Terrible Deed Will Be Visible To All. The Ashes Of Your Wife And Child Will Remain Fastened To Your Skin, Never To Be Removed."</p>
<a class="learn-more-btn" href="#">Learn More</a>
</div>
<div class="icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
background: #000;
overflow: hidden;
}
.container {
width: 95%;
max-width: 1260px;
margin: auto;
}
h2.heading {
padding: 50px 0;
text-align: center;
color: #fff;
}
.profile-card {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}
.card {
width: 100%;
height: 400px;
display: block;
border-radius: 10px;
background: #fff;
overflow: hidden;
position: relative;
filter: blur(3px);
transition: background 0.8s linear;
}
.card0 {
background: url(01.jpg) center center no-repeat;
background-size: 400px;
}
.card1 {
background: url(02.jpg) center center no-repeat;
background-size: 400px;
}
.card2 {
background: url(03.jpg) center center no-repeat;
background-size: 400px;
}
.card3 {
background: url(04.jpg) center center no-repeat;
background-size: 400px;
}
.card:hover {
background-size: 600px;
background-position: left center;
filter: unset;
}
.overlay {
opacity: 1;
height: 100%;
padding: 20px;
background: rgba(0 0 0 / .4);
transition: opacity 0.8s linear;
}
h2, p {
color: #fff;
}
.content > h2 {
margin-bottom: 10px;
}
.content {
height: 90%;
position: relative;
right: -300px;
transition:right 0.8s linear;
}
.icons {
position: absolute;
left: 10px;
bottom: 10px;
color: #fff;
height: 130px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
opacity: 0;
transition:opacity 0.8s linear;
}
.icons > a {
color: #fff;
}
.card:hover .content {
right: 0;
}
.card:hover .icons {
opacity: 1;
}
.learn-more-btn {
position: absolute;
right: 0;
bottom: 0;
color: #fff;
text-decoration: unset;
padding: 5px 10px;
border: 1px solid;
}