link hover thumbnails stack menu Tailwind menus with richer hover states portfolio category links or featured lists editorial navigation that needs more visual presence than plain text single thumbnail reveal can feel too flat for premium menus need a stacked media hover without JavaScript want a more visual menu effect that still pastes cleanly into Tailwind layouts
Thumb Stack Link
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/thumb-stack-link.json '/%3E%3Crect x='48' y='56' width='144' height='92' rx='18' fill='rgba(255,255,255,.2)'/%3E%3Crect x='48' y='164' width='96' height='18' rx='9' fill='rgba(15,23,42,.2)'/%3E%3C/svg%3E)
'/%3E%3Ccircle cx='78' cy='84' r='28' fill='rgba(255,255,255,.34)'/%3E%3Cpath d='M36 180C62 144 94 126 132 126s66 18 92 54v24H36z' fill='rgba(15,23,42,.18)'/%3E%3C/svg%3E)
Quick Start
<a class="thumb-stack-link relative text-xl font-semibold text-slate-950" href="#"><span>Cases</span><img class="thumb-stack-media" src="/a.jpg" alt="" /><img class="thumb-stack-media" src="/b.jpg" alt="" /></a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 2460 bytes · 81 lines
- Custom Properties
-
--thumb-stack-shift--thumb-stack-duration - Classes
-
.thumb-stack-link.thumb-stack-media
link hover thumbnails stack menu
A more visual menu-link pattern than the single thumbnail reveal. The stacked thumbnails make a hover state feel richer without requiring a full animated panel or a complex JavaScript menu system.
Featured menu item
<a class="thumb-stack-link relative text-xl font-semibold text-slate-950" href="#">
<span>Cases</span>
<img class="thumb-stack-media" src="/a.jpg" alt="" />
<img class="thumb-stack-media" src="/b.jpg" alt="" />
</a>