28 CSS Stacked Card Designs 08 / 28
Fan Spread
Botanical "leaf" cards anchored to a single pivot point.
Best forportfolios, plant shops, or category menus.
The code
<div class="scd-fan">
<div class="scd-fan__stage">
<div class="scd-fan__leaf"><h3>Fern</h3><span>Pteridophyta</span></div>
<div class="scd-fan__leaf"><h3>Sage</h3><span>Salvia</span></div>
<div class="scd-fan__leaf"><h3>Ivy</h3><span>Hedera</span></div>
<div class="scd-fan__leaf"><h3>Thyme</h3><span>Thymus</span></div>
<div class="scd-fan__leaf"><h3>Moss</h3><span>Bryophyta</span></div>
</div>
</div> <div class="scd-fan">
<div class="scd-fan__stage">
<div class="scd-fan__leaf"><h3>Fern</h3><span>Pteridophyta</span></div>
<div class="scd-fan__leaf"><h3>Sage</h3><span>Salvia</span></div>
<div class="scd-fan__leaf"><h3>Ivy</h3><span>Hedera</span></div>
<div class="scd-fan__leaf"><h3>Thyme</h3><span>Thymus</span></div>
<div class="scd-fan__leaf"><h3>Moss</h3><span>Bryophyta</span></div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600&family=Spectral:wght@400&display=swap');
.scd-fan, .scd-fan *, .scd-fan *::before, .scd-fan *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-fan {
min-height: 460px;
display: grid;
place-items: center;
background: linear-gradient(135deg,#f4ede1,#e6dcc6);
font-family: 'Spectral', serif;
}
.scd-fan__stage {
position: relative;
width: 200px; height: 280px;
transform: translateY(60px);
}
.scd-fan__leaf {
position: absolute; inset: 0;
border-radius: 14px 14px 60px 60px;
background: linear-gradient(165deg,#1f4d3a,#2d6e4f);
box-shadow: 0 16px 30px rgba(31,77,58,.35);
transform-origin: 50% 110%;
transition: transform .7s cubic-bezier(.34,1.4,.4,1);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 22px;
color: #e9f3ec;
border: 1px solid rgba(255,255,255,.15);
}
.scd-fan__leaf h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; }
.scd-fan__leaf span { font-size: .8rem; opacity: .7; letter-spacing: .18em; text-transform: uppercase; }
.scd-fan__leaf:nth-child(odd) { background: linear-gradient(165deg,#7a3b2e,#a8543f); }
.scd-fan__leaf:nth-child(1) { transform: rotate(-40deg); }
.scd-fan__leaf:nth-child(2) { transform: rotate(-20deg); }
.scd-fan__leaf:nth-child(3) { transform: rotate(0deg); }
.scd-fan__leaf:nth-child(4) { transform: rotate(20deg); }
.scd-fan__leaf:nth-child(5) { transform: rotate(40deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(1) { transform: rotate(-72deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(2) { transform: rotate(-36deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(3) { transform: rotate(0deg) translateY(-12px); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(4) { transform: rotate(36deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(5) { transform: rotate(72deg); }
@media (prefers-reduced-motion: reduce) {
.scd-fan__leaf { transition: none !important; }
} @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600&family=Spectral:wght@400&display=swap');
.scd-fan, .scd-fan *, .scd-fan *::before, .scd-fan *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-fan {
min-height: 460px;
display: grid;
place-items: center;
background: linear-gradient(135deg,#f4ede1,#e6dcc6);
font-family: 'Spectral', serif;
}
.scd-fan__stage {
position: relative;
width: 200px; height: 280px;
transform: translateY(60px);
}
.scd-fan__leaf {
position: absolute; inset: 0;
border-radius: 14px 14px 60px 60px;
background: linear-gradient(165deg,#1f4d3a,#2d6e4f);
box-shadow: 0 16px 30px rgba(31,77,58,.35);
transform-origin: 50% 110%;
transition: transform .7s cubic-bezier(.34,1.4,.4,1);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 22px;
color: #e9f3ec;
border: 1px solid rgba(255,255,255,.15);
}
.scd-fan__leaf h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; }
.scd-fan__leaf span { font-size: .8rem; opacity: .7; letter-spacing: .18em; text-transform: uppercase; }
.scd-fan__leaf:nth-child(odd) { background: linear-gradient(165deg,#7a3b2e,#a8543f); }
.scd-fan__leaf:nth-child(1) { transform: rotate(-40deg); }
.scd-fan__leaf:nth-child(2) { transform: rotate(-20deg); }
.scd-fan__leaf:nth-child(3) { transform: rotate(0deg); }
.scd-fan__leaf:nth-child(4) { transform: rotate(20deg); }
.scd-fan__leaf:nth-child(5) { transform: rotate(40deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(1) { transform: rotate(-72deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(2) { transform: rotate(-36deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(3) { transform: rotate(0deg) translateY(-12px); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(4) { transform: rotate(36deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(5) { transform: rotate(72deg); }
@media (prefers-reduced-motion: reduce) {
.scd-fan__leaf { transition: none !important; }
}More from 28 CSS Stacked Card Designs
Swipe StackAccordion 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 DeckTilted PolaroidsStaircase Bricks
View the full collection →