Back to Motion Prompt examples
Landing page & web effects · #09
Hover lift
On hover, the element rises with a deeper shadow. Only the card under the cursor lifts slightly and its shadow spreads; it settles back when the cursor leaves.
Hover & click interactionshoverliftfloatcardshadowtranslateyinteraction
Full motion specification
How the movement works
Use it to make cards and buttons look clickable.
- 01Three cards (146 × 128, radius 10). The cursor rests on each, left to right, for about 1 s.
- 02On hover the card rises 10 px over 0.3 s (cubic ease-out); on leave it returns over the same 0.3 s (like a CSS transition).
- 03Shadow, changed together with the lift: blur 6→22 px, y offset 2→12 px, opacity 0.08→0.22.
- 04Light grey page, white cards, so the shadow reads.
Prompt
Give the cards a hover lift: up 8 px with a deeper shadow, over 0.3 s.