List Hover Cards

Zenora UI

Get Started

List Hover Cards·Hover

npx zenora-ui-registry@latest add list-hover-cards

Hover

356 views•41 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add list-hover-cards

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A list of labels that dynamically expand on hover, revealing a secondary italicized label and floating images that follow the cursor.

KEY FEATURES

·Hovering a list item expands its height using fluid spring physics
·Floating images track the cursor with a slight parallax effect
·Labels crossfade gracefully between the bold default text and the italic alternative
·Auto-play mode cycles through the list to demonstrate the interaction

Props

8 properties

itemsstring[]6 images

List of labels for the cards.

bgColorcolortransparent

Container background color.

textColorcolor#ffffff

Color for both default and alt labels.

growthnumber50

How much the hovered item expands.

fontFamilystring'Host Grotesk', -…

Typeface for the main labels.

textScalenumber100

Relative size of the text.

speednumber100

Speed of the expand and hover animations.

autoPlaybooleanfalse

Cycles through the hover states automatically.