Expand OnHover List – Interactive Numbered List with Hover-to-Expand Details
Expand OnHover List is a modern, interactive Framer component that transforms a clean numbered list into a rich, detail-revealing experience. Instead of overwhelming visitors with all your content at once, this component displays a minimal numbered layout by default — and elegantly expands to reveal an image, description, and CTA the moment someone hovers. The smooth transitions, layered animations, and refined motion make your services, features, or case studies feel premium and intentional with almost no setup required.
Hover-to-Expand Interaction
Expands to reveal image, description, and arrow CTA on hover.
Inactive items stay minimal and greyed out — keeping focus sharp.
Smooth height, opacity, and fade transitions feel natural and responsive.
Supports numbered sequencing (01, 02, 03...) for structured storytelling.
Fully responsive and optimized for modern GPU-accelerated performance.
Customizable Design Controls Expand OnHover List includes full Framer property controls so you can instantly match it to your brand or layout.
Customize
List Items – Add, remove, or reorder as many items as needed.
Title & Description – Edit label and body text per item.
Image – Add a unique image or thumbnail to each list item.
Number Style – Adjust size, color, and opacity of index numbers.
Expanded Height – Control how tall each item grows on hover.
Typography – Customize font size, weight, and spacing.
Divider Style – Adjust line color, thickness, or remove entirely.
Arrow Button – Toggle, resize, or restyle the CTA arrow.
Transition Speed & Easing – Control how quickly items expand.
Active & Inactive Colors – Fine-tune contrast between states.
How It Works Expand OnHover List tracks the cursor's hover state across each list item. When a user hovers over a row, the component smoothly animates the item open — expanding its height and fading in the image and description using layered motion transitions. Inactive rows simultaneously dim, keeping visual focus on the active item. When the cursor moves away, the expanded item gracefully collapses back to its default minimal state, ready for the next interaction.
Pentaclay
