Lightbox Zoom

Una tarjeta crece hasta convertirse en una vista de detalle completa, manteniendo un único contenedor visible que cambia de forma y revela contenido nuevo.

Añade una transición "Container Transform" (también llamada card expand to detail o expandable card) en [dónde].
Al abrir la tarjeta, el mismo contenedor debe crecer con suavidad hasta la vista de detalle completa: su contenido anterior se desvanece rápido y el nuevo aparece cuando casi ha terminado de crecer; al cerrar se reproduce a la inversa.
Mantenlo como un único contenedor continuo en lugar de un fundido entre dos cajas separadas, y mueve el foco a la vista de detalle al abrirse.

Un elemento equivalente, como una miniatura, se transforma en posición y tamaño de una página a la siguiente.

Añade una transición de elemento compartido ("Shared Element Transition", también llamada hero transition o view-transition-name morph) en [dónde].
Al pasar a la página siguiente, el elemento equivalente, como una miniatura, debe moverse y crecer con suavidad hasta su lugar en la nueva página mientras el resto del contenido hace un fundido cruzado, y encogerse de vuelta al regresar.
Da a los elementos equivalentes de ambas páginas una misma identidad compartida para que se emparejen bien y recurre a un simple fundido cruzado cuando el navegador no pueda transformarlos.

Un diálogo aparece mientras crece ligeramente desde su centro sobre una página oscurecida.

Añade una animación "Modal Scale-Fade In" (también llamada dialog open animation o zoom-fade dialog) en [dónde].
El diálogo debe aparecer mientras crece ligeramente desde su centro y la página de detrás se oscurece: rápido y sutil, sin rebote.
Reprodúcela una vez cada vez que se abra el diálogo, mueve el foco a él y mantenlo dentro, y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).

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.

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.