Grow

The element quickly scales up and settles back with a springy pop.

Add a "Pop" hover effect to [where].
Each time the pointer enters, the element should swell up once quickly and settle back to its normal size, like a small springy pop.
Play it once per hover rather than holding the larger size or looping, and keep the surrounding layout from shifting.

The element scales with an elastic overshoot when hover starts or ends.

Add a "Bounce Scale" hover effect (also called bounce in / out) to [where].
The element should grow slightly larger with a springy, visible overshoot, briefly going past its final size before settling, and bounce back the same way when the pointer leaves.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

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.

Icons in a row grow smoothly as the pointer approaches, like the macOS Dock.

Add a "Dock Magnification" effect (also called dock) to [where].
Icons in the row should grow smoothly as the pointer gets closer, with the nearest icon largest and its neighbors slightly enlarged, and all return to normal size when the pointer leaves.
Grow the icons upward from a fixed baseline, and keep every icon usable at its normal size on touch and keyboard.

The filled background empties, leaving only an outlined button on hover.

Add a "Hollow" hover effect (also called ghost fill) to [where].
The filled background should fade away, leaving only the outline, and the label should change color to stay readable on the empty background: smooth and quick.
Keep the border the same thickness in both states so the element doesn't change size, and show the same effect on keyboard focus.

A gradient border animates around the element and expands when the pointer is over it.

Add a "Hover Border Gradient" effect to [where].
A short gradient highlight should rest on one part of the border; while the pointer is over the element it should travel steadily around the border as the whole border brightens with a soft glow.
Animate the border only while hovered, and keep it still for users who prefer reduced motion.

A soft shadow appears or deepens beneath the element on hover to suggest elevation.

Add a "Hover Shadow" effect (also called drop shadow on hover or elevation on hover) to [where].
A soft shadow beneath the element should deepen and spread while the pointer is over it so it looks raised, and fade back when it leaves, while the element itself stays in place.
Keep the shadow subtle enough to work in both light and dark themes, and show the same effect on keyboard focus.