Skip to main content

Phase 6 — Dynamic GIF Hover Previews

#Testing#Media#Web Development
August 28, 20261 min read
Share

What this phase adds

When you hover certain links, a small GIF preview floats near your cursor, fading in with a smooth scale transition and clamping to the viewport edges.

Try it

  • Hover the CV button in the header (top-right) — it carries a data-gif.
  • Hover this inline link to GitHub: Astro repo. GitHub links are mapped to a demo GIF on the client.
  • Hover this raw-HTML link with an explicit preview: Expressive Code.
  • Hover this transparent GIF link (no dark box behind it): Astro (transparent).

Toggle transparency per link with data-gif-transparent="true", or per host in GIF_MAP ({ src, transparent: true }).

The preview re-binds automatically after every View Transition (astro:page-load), and the GIF is preloaded on mouseenter so it appears instantly.

How it works

  • src/scripts/gif-hover.js — floating <img>, cursor tracking, viewport clamping, and a hostname → GIF map for markdown links.
  • src/styles/gif-hover.css — opacity + scale transition (0.25s), with a prefers-reduced-motion fallback.
  • public/gifs/ — the sample GIFs (cv.gif, demo.gif).

To map more domains, edit GIF_MAP at the top of gif-hover.js.