28 CSS Stacked Card Designs 12 / 28
Hover Spread
Three rounded pastel product cards that fan left, center, and right on hover.
Best forproduct showcases, plans, or color/variant pickers.
The code
<div class="scd-hov">
<div class="scd-hov__stage">
<div class="scd-hov__card scd-hov__card--c1"><div><span class="scd-hov__tag">SUNRISE</span><h3>Citrus</h3></div><span class="scd-hov__price">$18</span></div>
<div class="scd-hov__card scd-hov__card--c2"><div><span class="scd-hov__tag">MEADOW</span><h3>Verdant</h3></div><span class="scd-hov__price">$22</span></div>
<div class="scd-hov__card scd-hov__card--c3"><div><span class="scd-hov__tag">TWILIGHT</span><h3>Indigo</h3></div><span class="scd-hov__price">$26</span></div>
</div>
</div> <div class="scd-hov">
<div class="scd-hov__stage">
<div class="scd-hov__card scd-hov__card--c1"><div><span class="scd-hov__tag">SUNRISE</span><h3>Citrus</h3></div><span class="scd-hov__price">$18</span></div>
<div class="scd-hov__card scd-hov__card--c2"><div><span class="scd-hov__tag">MEADOW</span><h3>Verdant</h3></div><span class="scd-hov__price">$22</span></div>
<div class="scd-hov__card scd-hov__card--c3"><div><span class="scd-hov__tag">TWILIGHT</span><h3>Indigo</h3></div><span class="scd-hov__price">$26</span></div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&display=swap');
.scd-hov, .scd-hov *, .scd-hov *::before, .scd-hov *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-hov {
min-height: 460px;
display: grid;
place-items: center;
background: linear-gradient(120deg,#ffe3ec,#e4e9ff);
font-family: 'DM Sans', sans-serif;
}
.scd-hov__stage { position: relative; width: 200px; height: 280px; }
.scd-hov__card {
position: absolute; inset: 0;
border-radius: 24px;
padding: 24px;
display: flex; flex-direction: column; justify-content: space-between;
box-shadow: 0 14px 34px rgba(80,60,120,.2);
transition: transform .55s cubic-bezier(.34,1.3,.4,1), box-shadow .4s;
cursor: pointer;
color: #3a2f4a;
}
.scd-hov__card h3 { font-family: 'Syne', sans-serif; font-size: 1.5rem; }
.scd-hov__price { font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 800; }
.scd-hov__tag { font-size: .85rem; opacity: .7; }
.scd-hov__card--c1 { background: linear-gradient(160deg,#fff0a8,#ffd56b); z-index: 3; }
.scd-hov__card--c2 { background: linear-gradient(160deg,#c2f0d8,#86d9b0); z-index: 2; }
.scd-hov__card--c3 { background: linear-gradient(160deg,#cfd6ff,#9aa8ff); z-index: 1; color: #2a2a4a; }
.scd-hov__stage:hover .scd-hov__card--c1 { transform: translateX(-130px) rotate(-8deg); }
.scd-hov__stage:hover .scd-hov__card--c3 { transform: translateX(130px) rotate(8deg); }
.scd-hov__stage:hover .scd-hov__card--c2 { transform: translateY(-16px) scale(1.05); }
.scd-hov__card:hover { box-shadow: 0 26px 50px rgba(80,60,120,.32); }
@media (prefers-reduced-motion: reduce) {
.scd-hov__card { transition: none !important; }
} @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&display=swap');
.scd-hov, .scd-hov *, .scd-hov *::before, .scd-hov *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-hov {
min-height: 460px;
display: grid;
place-items: center;
background: linear-gradient(120deg,#ffe3ec,#e4e9ff);
font-family: 'DM Sans', sans-serif;
}
.scd-hov__stage { position: relative; width: 200px; height: 280px; }
.scd-hov__card {
position: absolute; inset: 0;
border-radius: 24px;
padding: 24px;
display: flex; flex-direction: column; justify-content: space-between;
box-shadow: 0 14px 34px rgba(80,60,120,.2);
transition: transform .55s cubic-bezier(.34,1.3,.4,1), box-shadow .4s;
cursor: pointer;
color: #3a2f4a;
}
.scd-hov__card h3 { font-family: 'Syne', sans-serif; font-size: 1.5rem; }
.scd-hov__price { font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 800; }
.scd-hov__tag { font-size: .85rem; opacity: .7; }
.scd-hov__card--c1 { background: linear-gradient(160deg,#fff0a8,#ffd56b); z-index: 3; }
.scd-hov__card--c2 { background: linear-gradient(160deg,#c2f0d8,#86d9b0); z-index: 2; }
.scd-hov__card--c3 { background: linear-gradient(160deg,#cfd6ff,#9aa8ff); z-index: 1; color: #2a2a4a; }
.scd-hov__stage:hover .scd-hov__card--c1 { transform: translateX(-130px) rotate(-8deg); }
.scd-hov__stage:hover .scd-hov__card--c3 { transform: translateX(130px) rotate(8deg); }
.scd-hov__stage:hover .scd-hov__card--c2 { transform: translateY(-16px) scale(1.05); }
.scd-hov__card:hover { box-shadow: 0 26px 50px rgba(80,60,120,.32); }
@media (prefers-reduced-motion: reduce) {
.scd-hov__card { transition: none !important; }
}More from 28 CSS Stacked Card Designs
Accordion Card3D Flip StackTilt on HoverScratch CardsCSS Stacked Cards Hover RevealPure CSS Stacked Card Testimonial Slider3D Overlapping Stacked Cards (Isometric View)Minimalist Bento Grid Stacked CardsClassic DeckFan SpreadTilted PolaroidsStaircase Bricks
View the full collection →