← All elements
<figure class="zc"><div class="art"></div><figcaption>Sunset Dunes</figcaption></figure>About this card
A picture-style card whose artwork zooms inside a clipped frame on hover while a caption slides up.
How it works
The artwork fills a frame with overflow hidden and rounded corners. On hover the artwork scales to 1.2 over half a second, which looks like a zoom because the frame clips it. A caption bar sits just below the frame bottom and slides up with a translate transition at the same time.
Ways to customise it
- Replace the gradient with a background image.
- Change the scale from 1.2 to a larger value.
- Edit the caption text and gradient.
Good to know
Hover effects do not exist on touch, so keep the caption readable without them if it matters. Scaling uses the compositor and stays smooth. Give real images alt text.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.