Pro
Hover image links
A list of links that shows each one's picture beside the pointer. The preview trails on a soft spring, leans with its speed and crossfades between pictures as you move down the list.
pnpm dlx shadcn@latest add @caliper/hover-image-linksCustomer stories
How five teams moved their month-end close this year
When to use
Use it for
- Case studies, articles, projects and collections in a list.
- Indexes where the picture helps choose but the title should lead.
Skip it when
- Product UI tables and menus.
- Lists without good pictures; the empty preview is worse than none.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- One trail per visit
- Moving between rows changes the picture, not the preview's position, so it reads as one object travelling down the list.
- Touch gets thumbnails
- Without hover, and on phones, each row shows its own small picture instead of a floating one.
Installation
pnpm dlx shadcn@latest add @caliper/hover-image-links
Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { HoverImageLinks } from "@/components/ui/hover-image-links"
The worked example comes with Pro
The 32-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
HoverImageLinks
component
Accessibility
It is built on native elements and keeps aria-label and aria-hidden in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.