Welcome To ITSolutionsGuides,
Lets see How To Create Flip Card On Hover Using CSS using the it solutions guides tutorial. decorate your website with interactive flip cards! Learn how to use CSS to create stunning flip animations that surprise your visitors. It's easier than you think
This will involve creating a container element for the card, and then two inner elements for the front and back sides of the card.Once you have the HTML structure in place, you can start styling the flip card using CSS. You will need to style the container element, the front and back sides of the card, and the hover state of the card. To create the flip effect, you will use the transform property in CSS. The transform property allows you to apply different transformations to elements, such as rotation, scaling, and skewing. In this case, you will use the rotateY() function to rotate the card on hover.
<!DOCTYPE html>
<html>
<titl>ITSolutionsGuides - Flip card on hover</titl>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.flip-card {
background-color: transparent;
width : 300px;
height : 300px;
perspective : 1000px;
}
.flip-card-inner {
position : relative;
width : 100%;
height : 100%;
text-align : center;
transition : transform 0.6s;
transform-style: preserve-3d;
box-shadow : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position : absolute;
width : 100%;
height : 100%;
-webkit-backface-visibility: hidden;
backface-visibility : hidden;
}
.flip-card-front {
background-color: #bbb;
color : black;
}
.flip-card-back {
background-color: #2980b9;
color : white;
transform : rotateY(180deg);
}
</style>
</head>
<body>
<h1>Card Flip on hover</h1>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://itsolutionsguides.com/uploads/tutorial/main/tutorial119.jpg" alt="Avatar"
style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>How to Create Hover Zoom effect in CSS</h1>
<a href="https://itsolutionsguides.com/tutorial/how-to-create-hover-zoom-effect-in-css">Click</a>
</div>
</div>
</div>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides