Magnifier Lens (lupa)
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
Variantes
- Lens
Prompt
Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.
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.Animaciones parecidas
Pasa el ratón por encima
Hover Zoom
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.- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
Mueve el puntero aquí
Cursor Spotlight
También llamado Flashlight cursor, Spotlight effect
Un círculo de luz alrededor del puntero revela el contenido mientras el resto queda a oscuras.
Se usa en
Secciones hero, efectos de revelado
Añade un efecto "Cursor Spotlight" (también llamado flashlight cursor o spotlight effect) en [dónde].
Un círculo de luz suave debe seguir al puntero y revelar el contenido que tiene debajo mientras el resto de la zona queda atenuado.
En dispositivos táctiles, donde no hay puntero que seguir, muestra el contenido totalmente iluminado.- A
- B
- C
- D
ABCD
Mueve el puntero aquí
Cursor Image Hover
También llamado Hover image follow, Image preview on hover
Una imagen de vista previa sigue al puntero al pasar sobre un elemento de una lista de texto.
Se usa en
Listas de proyectos, menús
Añade un efecto "Cursor Image Hover" (también llamado hover image follow o image preview on hover) en [dónde].
Mientras el puntero esté sobre un elemento de una lista de texto, una pequeña imagen de vista previa de ese elemento debe flotar junto al puntero, siguiéndolo con un ligero retraso suave y deslizándose a la siguiente imagen cuando el puntero pase a otro elemento.
La vista previa nunca debe bloquear los clics en la lista, y la lista debe seguir siendo totalmente usable sin ella en táctil y con teclado.Más en Image & Media
A
B
Arrastra
Before-After Slider
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.Desplázate dentro
Image Reveal Wipe
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).