Hey coders, today we will see how to make a cool image card which has a flip animation when hovered. Do check out my YouTube tutorial below for better understanding and visualization.
Okay, so as the name states it, the user has to hover on the card and it has a 3D flip animation. This animation makes it look like the card is flipped to show the back of the card which has some text that we added.
Okay, let's see the source codes of this project. Paste the code below in a HTML file.
<!--Created by CodingPorium,2021. Visit codingporium.blogspot.com or
search for CodingPorium on YouTube with no spaces. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Card with Flip Animation | CodingPorium</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
background-color: mediumseagreen;
height: 100vh;
}
::selection{
background-color: royalblue;
color:white;
}
.card{
width: 350px;
height: 250px;
position: relative;
}
.card .front,
.card .back{
position: absolute;
width: 350px;
height: 250px;
background: #121447;
backface-visibility: hidden;
transform-style: preserve-3d;
cursor: pointer;
border-radius: 20px 20px 0 0;
border-radius: 20px;
box-shadow: 0 5px 30px rgba(163, 61, 21, 0.200 ),
0 -5px 30px rgba(115, 55, 212, 0.200);
transition: transform .4s;
}
.card .back{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: perspective(800px) rotateX(-180deg);
}
.card .back h1{
color:gold;
}
.card .back p{
margin: 10px 20px;
color:white;
text-align: center;
}
.card .front img{
width: 100%;
height: 100%;
border-radius: 0 0 20px 20px;
position: absolute;
}
.card:hover .front{
transform: perspective(800px) rotateX(180deg);
}
.card:hover .back{
border-radius: 20px 20px 0 0;
transform: perspective(800px) rotateX(0);
}
</style>
<body>
<div class="card">
<div class="front">
<img src="gift.jpg" alt="">
</div>
<div class="back">
<h1>Happy Birthday!</h1>
<p>Today is actually my Birthday. I'm so happy to have all of you
celebrating my birthday with me!</p>
</div>
</div>
</body>
</html>
And that's all for this article. Thanks for reading, and do subscribe to out YouTube channel to support us.
Till the next one, goodbye!
Post a Comment