CARD_01
Back to library
INTERACTION_009
Image Zoom.
The frame stays fixed while the media scales to 1.06 over 700ms, producing an editorial, cinematic feel instead of a jumpy zoom.
- CATEGORY
- Cards
- COMPLEXITY
- Easy
- TECH
- CSS
- PLATFORM
- Both
- PERFORMANCE
- Light
LIVE PLAYGROUND
CSS / CSS
.frame { overflow: hidden; border-radius: 18px; }
.frame img {
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.frame:hover img { transform: scale(1.06); }