Card Hover Effect

An underline or pill glides from the old tab to the newly selected tab.

Add a "Tab Indicator Slide" (also called a sliding underline or active tab indicator) to [where].
When a new tab is selected, the underline should glide from the old tab to the new one, quick and smoothly decelerating, stretching to the new tab's width if it differs.
Keep proper tab semantics with arrow-key navigation, and move the indicator without sliding for users who prefer reduced motion.

An element appears to move and resize into a matching element in a new spot, sharing one identity.

Add a "Shared Layout Animation" (also called an in-page shared element) to [where].
When the selection changes, the element should appear to move and resize smoothly from its old spot into its new one, easing gently into place, so it reads as one object rather than two.
Show only one copy at any moment, and keep the surrounding layout from jumping while it moves.

Sibling cards blur and dim while one hovered card stays sharp.

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.

A soft radial light follows the pointer across the card surface and reveals the background beneath.

Add a "Card Spotlight" effect (also called spotlight hover, pointer glow, mouse-following glow or radial gradient hover) to [where].
A soft, faint radial glow should follow the pointer across the card surface, fading in when the pointer enters and out when it leaves.
Keep the glow behind the card content so text stays readable, and on touch devices simply leave the card unlit.

A corner of the element folds up like a turning page on hover.

Add a "Curl" hover effect (also called page curl) to [where].
One corner of the element should fold up smoothly like a page being turned, showing the back of the fold, and flatten again when the pointer leaves.
Keep the fold small so it doesn't cover important content, and show the same effect on keyboard focus.

An overlay slides in from the side the pointer entered and leaves toward the side it exits.

Add a "Direction Aware Hover" effect (also called direction-aware overlay) to [where].
An overlay should slide in from whichever side the pointer entered and slide out toward the side it leaves: quick and smooth.
Work out the side from the pointer position on entry and on exit, and on touch or keyboard focus fall back to one default direction.