Lightbox Zoom

A card grows into a full detail view, keeping one visible container that reshapes and reveals new content.

Add a "Container Transform" transition (also called card expand to detail or an expandable card) to [where].
When the card is opened, the same container should grow smoothly into the full detail view, its old content fading out quickly and the new content fading in once it has nearly finished growing; closing plays it in reverse.
Keep it one continuous container rather than a crossfade between two separate boxes, and move focus into the detail view when it opens.

A matching element, such as a thumbnail, morphs in position and size from one page to the next.

Add a "Shared Element Transition" (also called a hero transition or view-transition-name morph) to [where].
When moving to the next page, the matching element, such as a thumbnail, should smoothly move and grow into its place on the new page while the rest of the content crossfades, and shrink back when returning.
Give the matching elements on both pages one shared identity so they pair up correctly, and fall back to a plain crossfade where the browser can't morph them.

A dialog fades in while scaling up slightly from its center over a dimmed page.

Add a "Modal Scale-Fade In" animation (also called a dialog open animation or zoom-fade dialog) to [where].
The dialog should fade in while scaling up slightly from its center as the page behind it dims: quick and subtle, with no bounce.
Play it once each time the dialog opens, move focus into it and keep it there, and use a plain fade 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.

A circular lens follows the pointer and shows a magnified area of the image.

Add a "Magnifier Lens" (also called a lens or loupe) to [where].
A round lens should sit directly under the pointer with no lag and show a magnified view of the part of the image beneath it.
Keep the magnified view lined up with the exact point under the pointer, and on touch devices show the lens while the finger is held on the image.

A draggable divider reveals one image on one side and another on the other.

Add a "Before-After Slider" (also called an image comparison slider or compare slider) to [where].
Two images sit on top of each other, and dragging a vertical divider reveals more of one and less of the other; the divider follows the pointer directly with no lag.
Start the divider in the middle, and make it work with touch and with the arrow keys.