03 Directional Hover. 3 of 95.
03/POINTER INTENT/3 of 95
Directional Hover
Hover should respond to where the cursor actually comes from.
Best experienced with a pointer.
The problem
Cards reveal with the same slide-up every time, so hover feels flat — the UI ignores which edge the pointer entered.
The solution
Overlay and image shift based on whether the cursor entered from top, bottom, left, or right.
Experiment
Play with the values
20px
280ms
8px
How it works
- The pointer entering a card has a side, not only a boolean hover state.
- The entry point is compared with the card's center.
- That comparison resolves top, bottom, left, or right.
- The motion variant for that side is chosen.
- The overlay and image animate in from the side the cursor actually came from.
Seen in
Portfolio grids
Project cards reveal titles from the edge you approached.
Product galleries
Hover overlays feel attached to the pointer’s arrival side.
Team directories
Profile cards slide details in spatially instead of always upward.
Editorial teasers
Image and caption share a direction so the hover reads as one gesture.