In this step-by-step tutorial, we'll show you how to create an awesome flip card with a smooth hover effect using HTML and CSS. Flip cards are a great way to add interactivity and engagement to your website. Whether you want to showcase product details, team members, or just add a fun element to your web page, this tutorial has got you covered.
Don't forget to like, share, and subscribe for more web development tutorials and tips. If you have any questions or need further assistance, feel free to leave a comment, and we'll be happy to help you out. Happy coding!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Hover Cards</title>
</head>
<body>
<a href="#">
<div class="card">
<div class="wrapper">
<img src="Image/Spider BG.jpg" alt="spider" class="image">
</div>
<div class="character">
<img src="Image/Spider 2.png" alt="spider" class="character">
</div>
</div>
</a>
<a href="#" class="hulk">
<div class="card">
<div class="wrapper">
<img src="Image/Hulk-BG.jpg" alt="spider" class="image">
</div>
<div class="character">
<img src="Image/Hulk.png" alt="spider" class="character">
</div>
</div>
</a>
</body>
</html>
style.css
*{
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-image: url(Image/wall.jpg);
}
:root{
--card-height:300px;
--card-width:calc(var(var(--card-height)/1.5));
}
.card{
margin: 60px 100px;
padding: 60px 60px;
display: flex;
width: var(--card-width);
height: var(--card-height);
position: relative;
justify-content: center;
align-items: flex-end;
perspective: 2500px;
}
.image{
width: 250px;
height: 100%;
object-fit: cover;
}
.wrapper{
width: 210%;
position: absolute;
transition: all 0.5s;
z-index: -1;
}
.wrapper:hover{
transform: rotateX(50deg);
}
.card:hover .wrapper{
box-shadow: 5px 20px 20px -5px rgba(180,45,45,0.75);
transform: perspective(9000px) translateY(2%) rotateX('25deg')
rotateZ(0deg);
--webkit-box-shadow:5px 20px 20px -5px rgba(180,45,45,0.75);
--moz-box-shadow:5px 20px 20px -5px rgba(180,45,45,0.75);
position: absolute;
}
.wrapper::before, .wrapper::after{
content: '';
opacity: 0;
width: 100%;
height: 150px;
left: 0;
position: absolute;
transition: all 0.5s;
}
.wrapper::before{
top: 0;
height: 100%;
background-image: linear-gradient(to top, transparent 50%),
rgba(12,13,19,0.5) 68%,
rgba(12,13,19)97%;
}
.wrapper::after{
bottom: 0;
opacity: 1;
background-image: linear-gradient(to bottom, transparent 46%),
rgba(12,13,19,0.5)68%,
rgba(12,13,19)97%;
}
.card:hover .wrapper::before, .wrapper::after{
opacity: 1;
}
.card:hover .wrapper::after{
height: 120px;
}
.character{
width: 150px;
opacity: 0;
transition: all 0.5s;
position: absolute;
z-index: 1;
transform: translate3d(2px , -170px , -90px);
}
.card:hover .character{
opacity: 1;
transform: translate3d(0% -30px 10px );
}
a{
padding-top: 90px;
}
.hulk:hover .wrapper{
box-shadow: 5px 20px 20px -5px rgba(45,180,92,0.75);
transform: perspective(9000px) translateY(2%) rotateX('25deg')
rotateZ(0deg);
--webkit-box-shadow:5px 20px 20px -5px rgba(45,180,92,0.75);
--moz-box-shadow:5px 20px 20px -5px rgba(45,180,92,0.75);
position: absolute;
}
.hulk .character{
width: 200px;
}
Comments
Post a Comment