Image Reveal Wipe

A clip-path or mask grows from an edge or point so the image or text is progressively uncovered.

Add a "Clip Reveal" entrance effect (also called mask reveal, wipe reveal or image reveal) to [where].
A clipping edge should sweep across from left to right so the content is uncovered progressively while it stays still: smooth, starting and ending softly.
Reserve the element's space from the start so nothing shifts, and show it fully uncovered when the user prefers reduced motion (prefers-reduced-motion).

A masked shape wipes or follows the pointer to uncover content beneath.

Add an "SVG Mask Reveal" hover effect (also called a clip-path reveal or spotlight mask) to [where].
While the pointer is over it, a circular mask should grow from the center and uncover the content underneath, then close again when the pointer leaves: smooth and fairly quick.
Keep both layers exactly the same size so nothing shifts, and show the same reveal on keyboard focus and tap.

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.

Solid panels sweep across the screen to cover the old page, then retract to reveal the new one.

Add a "Curtain / Panel Wipe" page transition (also called a page wipe or staggered panels) to [where].
Solid panels should sweep in one after another to cover the old page, the page should switch while it is fully covered, and the panels should carry on out of view to reveal the new one: bold and smooth.
Never show the new page before the panels have covered the old one, and use a plain fade instead for users who prefer reduced motion.

A still image slowly zooms and pans across its frame.

Add a "Ken Burns Effect" (also called slow pan and zoom) to [where].
While each image is shown it should very slowly zoom and drift in one direction only, then cross-fade to the next image, which moves in a different direction: calm and continuous.
Keep every image covering its whole frame at every moment so no edge ever shows, and keep the images still for users who prefer reduced motion.

A thumbnail scales up from its place into a large centered view over a dimmed backdrop.

Add a "Lightbox Zoom" (also called an image zoom overlay or Medium-style zoom) to [where].
Clicking a thumbnail should make it grow smoothly from its own place into a large centered view while the page behind fades back, and closing should shrink it back into the same place.
Close it with Escape or a click on the backdrop, move focus into the view while it is open, and return focus to the thumbnail afterward.

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.