Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create responsive stacked card hover effect using CSS?
Card-style design is better than others in terms of functionality and aesthetics. To suit the needs of different screen sizes, the card design can assist users focus on specific content very easily, as well as enabling designers to put up the content reasonably and clearly throughout design. The card design is incredibly versatile and may be used for practically any purpose in any sector.
In this article, we will use HTML and CSS to construct a responsive stacked cards hover effect.
Syntax
.card::before,
.card::after {
content: "";
position: absolute;
transform: translate(x, y);
transition: transform 0.5s;
}
.card:hover::before,
.card:hover::after {
transform: translate(new-x, new-y);
}
Steps to be Followed
First, create a simple card structure using HTML.
Use CSS for styling the basic structure of the card.
To create the stacking effect, we will use the ::before and ::after pseudo-elements as well as CSS position property.
To make the cards move away from the upper one, use CSS transform property.
To give the hovering effect, we will use transform property to the cards.
Method 1: Simple Stacked Card Effect
In the given example, when the user hovers over a card, the top-most card will translate over the X-axis as well as Y-axis, creating multiple stacked effects using the ::before and ::after pseudo-elements
<!DOCTYPE html>
<html>
<head>
<title>Stacked Cards Hover Effect</title>
<style>
body {
font-family: sans-serif;
color: #5c5957;
background: #e2d9d5;
margin-top: 70px;
}
h1 {
text-align: center;
}
.card {
position: relative;
cursor: pointer;
max-width: 380px;
margin: 70px auto;
}
.card::before,
.card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card::before,
.card::after,
.card .card-inner {
background-color: white;
border: 2px solid #e2d9d5;
border-radius: 7px;
transition: transform 0.5s;
}
.card::before,
.card-inner {
z-index: 1;
}
.card-inner {
position: relative;
padding: 60px;
}
.card-top::before {
transform: translate(calc(-1 * 8px), calc(-1 * 8px));
}
.card-top::after {
transform: translate(calc(-1 * 16px), calc(-1 * 16px));
}
.card-top:hover::before,
.card-top:hover::after,
.card-top:hover .card-inner {
transform: translate(calc(-1 * 8px), 0);
}
</style>
</head>
<body>
<h1>Stacked Cards Hover Effects</h1>
<div id="card-wrap">
<div class="card card-top">
<div class="card-inner">
<h3 id="card-heading">Stacked cards</h3>
<div id="card-body">This is an example of stacked card hover effect.</div>
</div>
</div>
</div>
</body>
</html>
A card with stacked layers appears. When hovered, the cards shift position creating a dynamic stacking effect with smooth transitions.
Method 2: Multiple Cards with Progress Bars
Here, we create multiple stacked cards with animated progress bars and hover effects
<!DOCTYPE html>
<html>
<head>
<title>Stacked Cards with Progress</title>
<style>
body {
background-color: rgba(16, 14, 23, 1);
font-family: 'Georgia', sans-serif;
margin: 0;
padding: 50px 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
padding: 20px;
}
.card {
display: flex;
flex-direction: column;
position: relative;
left: 0px;
height: 290px;
width: 210px;
border-radius: 15px;
box-shadow: -3px 0 6px black;
background-color: rgba(23, 20, 29, 1);
transition: 0.6s ease-out;
margin-left: -40px;
}
.card:first-child {
margin-left: 0;
}
.card:hover {
transform: translateY(-25px);
transition: 0.7s ease-out;
}
.card:hover ~ .card {
position: relative;
left: 48px;
transition: 0.7s ease-out;
}
.card-heading {
position: absolute;
left: 21px;
top: 16px;
color: white;
font-weight: 300;
letter-spacing: 1px;
margin: 0;
}
.card-content {
text-align: center;
position: relative;
top: 80%;
color: white;
margin: 0;
}
.progress-bar {
position: absolute;
top: 90px;
left: 16px;
height: 6px;
width: 140px;
}
.empty-bar {
background-color: rgba(46, 49, 51, 1);
width: 100%;
height: 100%;
}
.filled-bar {
position: absolute;
top: 0px;
z-index: 2;
width: 0px;
height: 100%;
background: linear-gradient(90deg, #009bd9 0%, #d99345 60%, #ffda00 100%);
transition: 0.7s ease-out;
}
.card:hover .filled-bar {
width: 130px;
transition: 0.7s ease-out;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h3 class="card-heading">Card 1</h3>
<div class="progress-bar">
<div class="empty-bar"></div>
<div class="filled-bar"></div>
</div>
<h3 class="card-content">Front-end</h3>
</div>
<div class="card">
<h3 class="card-heading">Card 2</h3>
<div class="progress-bar">
<div class="empty-bar"></div>
<div class="filled-bar"></div>
</div>
<h3 class="card-content">Back-end</h3>
</div>
<div class="card">
<h3 class="card-heading">Card 3</h3>
<div class="progress-bar">
<div class="empty-bar"></div>
<div class="filled-bar"></div>
</div>
<h3 class="card-content">Database</h3>
</div>
</div>
</body>
</html>
Three dark-themed stacked cards appear. On hover, the card lifts up and other cards shift right, with animated progress bars filling with a colorful gradient.
Key Points
Cards are appealing and responsive, making them ideal for mobile devices.
The ::before and ::after pseudo-elements create the stacking effect without additional HTML markup.
Transform property with translate() creates smooth hover animations.
Cards can be shared across various social networks and platforms.
Card design complements all types of layouts and designs.
Conclusion
Stacked card hover effects provide an engaging way to present content with visual appeal. Using CSS pseudo-elements and transform properties, you can create sophisticated animations that enhance user interaction and improve the overall user experience on your website.
1K+ Views
