This post is an application.
Hover Me
Details
Modern card design with a flip animation. Fully customizable for various content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Modern responsive card design with hover flip effect. Ideal for displaying products or services.">
<title>Modern Responsive Card</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.card {
perspective: 1000px;
width: 300px;
height: 400px;
}
.card-inner {
width: 100%;
height: 100%;
position: relative;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
overflow: hidden;
}
.card-front {
background-color: #384d48;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
}
.card-back {
background-color: #8B8149;
transform: rotateY(180deg);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
}
</style>
</head>
<body>
<div class="card">
<div class="card-inner">
<div class="card-front">
Hover Me
</div>
<div class="card-back">
<h2>Details</h2>
<p>Modern card design with a flip animation. Fully customizable for various content.</p>
</div>
</div>
</div>
</body>
</html>
About Design
This is a modern card design with hover effects, suitable for displaying products, blog posts, or services. The card flips with a smooth transition, revealing more details.
219 Views
0 Copies
0 Downloads