También llamado Image comparison slider, Compare slider
Un divisor arrastrable muestra una imagen a un lado y otra al otro.
Se usa en
Retoque fotográfico, comparativas de productos
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.
También llamado Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
Una imagen se amplía dentro de su marco al pasar el cursor y a veces se desplaza con él.
Se usa en
Tarjetas de producto, miniaturas
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.
También llamado Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
Una imagen queda al descubierto cuando una cubierta se encoge o el borde de una máscara se expande.
Se usa en
Imágenes editoriales al hacer scroll
Añade un "Image Reveal Wipe" (también llamado mask reveal o clip-path reveal) en [dónde].
Cuando la imagen entre en pantalla al hacer scroll, una cubierta debe retirarse desde un lado y descubrirla con suavidad al ritmo del scroll, de modo que quede totalmente visible mucho antes de salir de la pantalla.
Reserva el espacio de la imagen para que el diseño no salte y muestra la imagen totalmente descubierta si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamado Slow pan and zoom, Ken Burns, Kenburns
Una imagen fija hace zoom y se desplaza lentamente dentro de su marco.
Se usa en
Presentaciones de hero, fondos
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).
También llamado Image zoom overlay, Medium-style zoom
Una miniatura se amplía desde su posición hasta una vista grande y centrada sobre un fondo oscurecido.
Se usa en
Galerías de imágenes, artículos
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.
También llamado Lens, Loupe, Lens (Magnifier), Hover zoom lens
Una lente circular sigue al cursor y muestra ampliada una zona de la imagen.
Se usa en
Imágenes de detalle de producto
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.