Dock Magnification

The element smoothly scales up slightly when the pointer is over it.

Add a "Grow" hover effect (also called scale up) to [where].
The element should scale up slightly and smoothly while the pointer is over it, and shrink back when the pointer leaves: quick and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

The element is pulled toward the pointer as it comes close, then snaps back when it leaves.

Add a "Magnetic Button" effect (also called a magnetic target or magnetic hover) to [where].
As the pointer comes close, the button should be pulled a little toward it with its label moving slightly further, and when the pointer leaves it should spring back to its place with a small bounce.
Keep the surrounding layout from shifting, and turn the pull off on touch devices and for users who prefer reduced motion.

An image scales up inside its frame on hover, sometimes panning with the pointer.

Add a "Hover Zoom" effect (also called image zoom on hover or zoom-pan) to [where].
While the pointer is over the image, it should slowly and smoothly scale up inside its frame while the frame keeps its size, and ease back when the pointer leaves.
Clip the image to its frame so nothing spills over the layout, and show the same zoom on keyboard focus.

The element rises upward a few pixels on hover, as if floating.

Add a "Float" hover effect (also called lift or raise) to [where].
The element should rise up a little and stay raised while the pointer is over it, then settle back when it leaves: smooth and gentle, with no bounce.
Move it visually without shifting the surrounding layout, and show the same effect on keyboard focus.

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 colored light halo appears around the element on hover.

Add a "Glow" hover effect (also called neon glow) to [where].
A soft colored halo should fade in around the element while the pointer is over it and fade out when it leaves: gentle, with no movement.
Keep the halo from affecting layout, and show the same effect on keyboard focus.