Loading…
Live component · try it
Premiumcard · hover · light
Hover Lift Card
Three cards that rise on hover with a shadow that grows underneath, the image inside zooming a touch while the card's 'Read more' arrow slides out. The lift uses two shadows, a tight one and a wide one, so the card reads as physically closer rather than just outlined.
Placeholder photos by Anastasia D, Brandon Smith and samsommer on Unsplash. Replace them with your own before launch.
The mechanic
Hover: `translateY(-6px)`, `box-shadow: 0 2px 4px fg@6%, 0 24px 48px -12px fg@25%` from a resting `0 1px 2px fg@6%`, image `scale(1.06)` inside an overflow-hidden frame, arrow `translateX(4px)`; all 0.35 s `cubic-bezier(.2,.8,.2,1)`. Focus-visible on the card link triggers the same state.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
