Mountains at sunrise
Colección · 24 piezas
HTML + CSSCards
Lift and zoom card
On hover the card rises, its colored shadow grows and the image inside zooms in slowly.
Settings
16px
1x
Code
<div class="uv-kl"><div class="img"></div><div class="tx"><h3>Mountains at sunrise</h3><p>Collection · 24 pieces</p></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
Where to use it
This hover card is the workhorse of any grid with pictures: collections in an online shop, destinations on a travel blog, listings on a real estate site or recent posts on a magazine homepage. When the cursor arrives, the card floats up, a shadow tinted with your color spreads underneath and the image zooms gently inside its frame.
The demo uses a gradient as the image; swap it for your own photo in the HTML. The zoom crops the edges a little, so avoid pictures with text or faces right at the border.