Ken Burns Effect

Una imagen se amplía dentro de su marco al pasar el cursor y a veces se desplaza con él.

Añade un efecto "Hover Zoom" (también llamado image zoom on hover o zoom-pan) en [dónde].
Mientras el cursor esté sobre la imagen, debe ampliarse lenta y suavemente dentro de su marco sin que el marco cambie de tamaño, y volver con suavidad cuando el cursor sale.
Recorta la imagen a su marco para que nada se salga del diseño y muestra el mismo zoom con el foco del teclado.

Un elemento o una escena se amplía o se reduce a medida que el usuario hace scroll.

Añade un efecto "Zoom on Scroll" (también llamado scroll zoom o scale on scroll) en [dónde].
Mientras la sección se mantiene en pantalla, el elemento debe crecer suavemente desde una tarjeta pequeña hasta llenar toda la vista, al ritmo del scroll, y encogerse de nuevo al subir.
Escálalo sin desplazar el diseño que lo rodea y muéstralo en su tamaño final sin zoom si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las capas se mueven a distintas velocidades respecto al scroll para crear sensación de profundidad.

Añade un efecto de scroll "Parallax" (también llamado parallax scrolling o parallax layers) en [dónde].
Las capas de fondo deben moverse más despacio que el contenido al hacer scroll, y la más lejana, menos que ninguna, para dar una sutil sensación de profundidad.
Mantenlo ligado a la posición del scroll sin retraso, deja el texto en la capa de velocidad normal, y desactiva el efecto 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.

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.