Back to Motion Prompt examples
Landing page & web effects, part 2 · #11
Image swap on hover
Hovering swaps the photo for another shot. With the cursor on a product card, the front photo of the T-shirt cross-fades to a back view; it returns to the front when the cursor leaves.
Mouse & input interactionsimage-swaphovercrossfadeproduct-cardecommercethumbnail
Full motion specification
How the movement works
Use it on e-commerce product grids to show another angle or an on-model shot without leaving the list.
- 01A 511 × 168 viewport with two product cards (photo frame 196 × 112, radius 8, name and price below). The cursor rests on the left card, then the right one, for about 1.3 s each. One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02On hover, over 0.3 s (quadratic ease-in-out), the front photo (small dot on the chest) cross-fades to the back photo (large star on the back); on leave it fades back over the same 0.3 s.
- 03Two dots under the photo (radius 3) show which photo is showing (the dark dot is the current one).
- 04The hover area is the whole card, including the name. The frame, name and price do not move.
Prompt
Add an image swap on hover to the product grid: cross-fade to the back view over 0.3 s when the cursor is on a card.