Image Reveal Wipe

Un clip-path o una máscara crece desde un borde o un punto y va descubriendo la imagen o el texto.

Añade un efecto de entrada "Clip Reveal" (también llamado mask reveal, wipe reveal o image reveal) en [dónde].
Un borde de recorte debe barrer de izquierda a derecha para ir descubriendo el contenido mientras este permanece quieto: fluido, con inicio y final suaves.
Reserva el espacio del elemento desde el principio para que nada se mueva, y muéstralo descubierto por completo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una forma de máscara barre o sigue al puntero para descubrir el contenido de debajo.

Añade un efecto hover "SVG Mask Reveal" (también llamado clip-path reveal o spotlight mask) en [dónde].
Mientras el puntero esté encima, una máscara circular debe crecer desde el centro y descubrir el contenido de debajo, y volver a cerrarse cuando el puntero se va: suave y bastante rápido.
Mantén las dos capas exactamente del mismo tamaño para que nada se mueva, y muestra el mismo revelado con el foco del teclado y al tocar.

Un divisor arrastrable muestra una imagen a un lado y otra al otro.

Añade un "Before-After Slider" (también llamado image comparison slider o compare slider) en [dónde].
Dos imágenes quedan superpuestas y, al arrastrar un divisor vertical, se ve más de una y menos de la otra; el divisor sigue al cursor directamente, sin retraso.
Empieza con el divisor en el centro y haz que funcione con el tacto y con las flechas del teclado.

Unos paneles sólidos barren la pantalla para cubrir la página anterior y luego se retiran para revelar la nueva.

Añade una transición de página "Curtain / Panel Wipe" (también llamada page wipe o staggered panels) en [dónde].
Unos paneles sólidos deben barrer la pantalla uno tras otro para cubrir la página anterior, la página debe cambiar mientras está totalmente cubierta y los paneles deben seguir hasta salir de la vista para revelar la nueva: contundente y fluida.
No muestres nunca la nueva página antes de que los paneles cubran la anterior y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una imagen fija hace zoom y se desplaza lentamente dentro de su marco.

Añade un "Ken Burns Effect" (también llamado slow pan and zoom) en [dónde].
Mientras se muestra cada imagen, debe hacer zoom y desplazarse muy despacio en una sola dirección, y luego fundirse con la siguiente imagen, que se mueve en otra dirección: tranquilo y continuo.
Haz que cada imagen cubra todo su marco en todo momento para que nunca se vea un borde, y deja las imágenes quietas si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una miniatura se amplía desde su posición hasta una vista grande y centrada sobre un fondo oscurecido.

Añade un "Lightbox Zoom" (también llamado image zoom overlay o Medium-style zoom) en [dónde].
Al hacer clic en una miniatura, debe crecer con suavidad desde su propio lugar hasta una vista grande y centrada mientras la página de fondo se atenúa, y al cerrar debe encogerse de vuelta al mismo lugar.
Ciérralo con Escape o con un clic en el fondo, lleva el foco a la vista mientras esté abierta y devuélvelo a la miniatura después.

Una lente circular sigue al cursor y muestra ampliada una zona de la imagen.

Añade una lupa ("Magnifier Lens", también llamada lens o loupe) en [dónde].
Una lente redonda debe quedar justo debajo del cursor, sin retraso, y mostrar ampliada la parte de la imagen que tiene debajo.
Mantén la vista ampliada alineada con el punto exacto bajo el cursor y, en pantallas táctiles, muestra la lente mientras el dedo se mantiene sobre la imagen.