← All elements
<div class="ns"><div>New follower <small>2m</small></div><div>Comment on your element <small>1h</small></div><div>Weekly report ready <small>3h</small></div></div>About this card
Three notifications stacked like a deck that fan out into a readable list when you hover.
How it works
Three cards are absolutely positioned on top of each other with decreasing scale and increasing downward offset to look like a deck. Hovering the group moves the second and third cards further down at full size so each becomes readable.
Ways to customise it
- Add more cards with extra translate steps.
- Change 72px and 144px to alter the spacing.
- Colour notifications by type.
Good to know
Hover-only reveal hides content from touch users, so in a real app make the list expandable with a button. The text inside each card is real text, so it is readable by screen readers.
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.