Directional Hover Card
A picture or content card that detects the exact edge (top, right, bottom, left) the mouse cursor enters from, and slides an information overlay in from that specific direction. It exits out the same edge the mouse leaves.
Live Demo
Project Apollo
A deep dive into spatial UI elements and directional awareness.
left edge detection
What It Is
A picture or content card that detects the exact edge (top, right, bottom, left) the mouse cursor enters from, and slides an information overlay in from that specific direction. It exits out the same edge the mouse leaves.
✓When to Use
- Rich portfolio image galleries
- E-commerce product grids
✕When NOT to Use
- Text-heavy informative tables
- Mobile-first designs lacking hover states
Configuration Tips
- 01Calculate the angle of the mouse entry relative to the center of the element to determine which of the 4 quadrants the mouse crossed.
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a card that detects mouse entry direction using trigonometry and slides an overlay div in from that corresponding side.
Code Example (Tailwind CSS)
export function DirectionalHoverCardDemo() {}Related Effects
Hover Lift Effect
A card or button smoothly translates upwards by a few pixels and increases its shadow cast, creating the illusion of moving closer to the user on hover.
Slide Transition
A view or component enters the screen by sliding linearly from an edge, providing spatial context about where the user is navigating to.