The card translates and scales slightly in response to pointer movement over it.
Add a "Wobble Card" effect to [where].
As the pointer moves over the card, the card should shift slightly toward it while its content shifts slightly the other way with a small scale-up, following smoothly, and everything settles back when the pointer leaves.
Keep the movement small, and turn it off on touch devices and for users who prefer reduced motion.
Also called Glare hover, Glare card, Magic card, Glare
A bright highlight follows the pointer across a card surface like a reflection.
Use for
Premium or collectible cards
Add a "Glare / Holographic Card" effect (also called a glare card or glare hover) to [where].
A soft bright highlight should follow the pointer across the card surface like light reflecting off it, while the card leans slightly toward the pointer; both fade away when the pointer leaves: smooth and subtle.
Let clicks pass through the glare layer, keep the content readable under it, and show the card without glare on touch devices.
A card tilts back in perspective on hover while a pin and glow rise toward the viewer.
Use for
Link preview cards
Add a "3D Pin" hover effect (also called pin hover 3D) to [where].
When the pointer is over the card, it should tilt back in perspective while a pin with a soft glow at its base rises up from its center; everything settles back when the pointer leaves: smooth, not bouncy.
Keep the card's space in the layout unchanged, and show the same effect on keyboard focus.
ABCDEF
Move your pointer here
Also called Perspective Text Tilt
Text rotates in 3D perspective following the mouse position.
Add a "Text Tilt" effect (also called perspective text tilt) to [where].
The text should tilt gently in 3D toward the pointer as it moves, following it smoothly, and ease back flat when the pointer leaves.
Keep the tilt subtle so the text stays readable, and leave the text flat on touch devices and for users who prefer reduced motion.