← All elements
<div class="fn"><i>A</i><i>B</i><i>C</i></div>About this card
A stack of cards that fans out on hover, each card rotated from a shared origin with a staggered transition.
How it works
Three cards sit on top of each other with a transform-origin below their bottom edge. On hover the first card rotates minus 24 degrees, the second lifts slightly, and the third rotates 24 degrees, which spreads them like a hand of cards. A springy cubic-bezier makes the motion feel lively.
Ways to customise it
- Change the 24deg angles for a wider or tighter fan.
- Edit each card gradient.
- Add a fourth card and give it its own rotation.
Good to know
Hover does not exist on touch, so the cards stay stacked there. Make the fan trigger on focus-within if the cards contain links.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.