Back to Motion Prompt examples
Landing page & web effects · #10
Image zoom on hover
The photo enlarges inside a fixed frame. The photo under the cursor slowly enlarges while its frame stays the same size, and shrinks back when the cursor leaves.
Hover & click interactionshoverzoomimagescaleoverflow-hiddenthumbnailgallery
Full motion specification
How the movement works
Use it on photo grids (work, products, articles) to show which item is about to be chosen.
- 01Two photo frames, 222 × 118 (radius 8). The cursor rests on the left one, then the right one, for about 1.5 s each.
- 02On hover the content scales 1→1.15 from the centre over 0.5 s (cubic ease-out); on leave it returns over 0.5 s.
- 03Anything outside the frame is clipped (overflow: hidden). The frame and the caption do not move.
Prompt
Add an image zoom on hover to the work photos: fixed frame, content to 1.1× over 0.5 s.