Hover image reveal

Full motion specification

How the movement works

Use it on lists of work, projects or properties that stay text-only and light, while letting people check a photo for the rows they care about.

1. 01A 511 × 168 viewport with a text-only list of four rows (39 px rows, 17 px names). The cursor moves down the rows, about 1 s on each. One pass takes 4.7 s (twice per 9.4 s pack cycle).
2. 02Hovered row: over 0.25 s (cubic ease-out) the name shifts 8 px right and the name and the arrow at the right turn orange; on leave they return over 0.25 s.
3. 03Photo: that row's photo (132 × 84, radius 6, drop shadow) appears 26 px right of the cursor, a little above it, kept inside the window vertically.
4. 04Over the same 0.25 s the photo goes from opacity 0 to 1 and from 0.85× to 1×. It follows the cursor without lag; moving to the next row fades the old photo out as the new one comes in.