Tailwind UI Pattern Registry for humans and agents

link hover thumbnail menu editorial Tailwind navs with media-backed hover states editorial article lists or featured links portfolio and category menus that need more than a text hover text links alone feel too flat in featured lists need a lightweight image-reveal hover without JS want a thumbnail hover pattern that still works in Tailwind markup

Thumb Reveal Link

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/thumb-reveal-link.json
Format
Thumbnail reveal link
Stage Background
Customize

Quick Start

<a class="thumb-reveal-link relative text-xl font-semibold text-slate-950" href="#"><span>Research notes</span><img class="thumb-reveal-media" src="/placeholder.svg" alt="" /></a>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
1773 bytes · 64 lines
Custom Properties
--thumb-reveal-scale--thumb-reveal-rotate--thumb-reveal-shift-x--thumb-reveal-shift-y--thumb-reveal-duration
Classes
.thumb-reveal-link.thumb-reveal-media
link hover thumbnail menu editorial

A practical version of the image-reveal-link idea for Tailwind projects. It is useful for editorial lists, highlighted menus, or resource links where a tiny visual teaser makes the hover state feel much richer.

<a class="thumb-reveal-link relative text-xl font-semibold text-slate-950" href="#">
  <span>Research notes</span>
  <img class="thumb-reveal-media" src="/placeholder.svg" alt="" />
</a>
<nav class="flex flex-col gap-4">
  <a class="thumb-reveal-link relative text-lg font-semibold text-slate-950" href="#">
    <span>Patterns</span>
    <img class="thumb-reveal-media" src="/placeholder.svg" alt="" />
  </a>
  <a class="thumb-reveal-link relative text-lg font-semibold text-slate-950" href="#">
    <span>Templates</span>
    <img class="thumb-reveal-media" src="/placeholder.svg" alt="" />
  </a>
</nav>