Focus Cards
Also called Blur siblings on hover, Hover focus blur, Card hover effect
Sibling cards blur and dim while one hovered card stays sharp.
Use for
Card grids, galleries
Variants
- Focus Cards
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Focus Cards" effect (also called blur siblings on hover, hover focus blur or card hover effect) to [where].
While the pointer is over one card, the other cards should blur, dim and shrink slightly as the hovered card stays sharp, all with a smooth fade that reverses when the pointer leaves.
Apply the same focus on keyboard focus, and keep every card sharp and readable when nothing is hovered.