Efectos de desplazamiento de imágenes Elementor: 30 animaciones de desplazamiento para imágenes
Una imagen estática simplemente se encuentra allí. Agregue efectos de desplazamiento de imagen y la misma imagen comienza a funcionar: un título se desliza, una descripción se desvanece y un clic envía a las personas a un enlace o abre una ventana emergente completa. El widget Image Hover Effects para Elementor se envía con 30 animaciones flotantes (8 en el complemento gratuito y 22 más con Pro) y las configura sin escribir una línea de CSS. Se adapta a los lugares donde una imagen tiene que llevar un título, un título y una acción: carteras, cuadrículas de equipos, tarjetas de servicio y exhibiciones de productos.
Elija un efecto, elija qué hace el clic y diseñe cada capa para que coincida con su diseño. Lo que terminas es una tarjeta de imagen en la que la gente se detiene en lugar de pasar. El siguiente vídeo recorre todo, muestra cada animación y la configuración dura un par de minutos.
¿qué son los efectos de desplazamiento de imágenes?
Un efecto de desplazamiento de imagen es una animación que se activa cuando alguien mueve el mouse sobre una imagen. En lugar de permanecer plano, la imagen reacciona. Puede ampliar, desenfocar, cambiar de color o deslizar un panel de texto para verlo. El tipo más común es una superposición de imágenes, donde un título y una descripción aparecen como texto sobre la imagen. También los verás llamados efectos de rollo de imagen o efectos de desplazamiento de fotos, y todos hacen lo mismo: tomar una imagen simple y hacerla leer como “hay más aquí, haz clic en mí”
Puedes construir todo esto a mano con CSS personalizado. Eso significa escribir las transiciones, lograr que se comporten en el móvil y volver al código cada vez que cambia el diseño. El widget Master Addons lo maneja visualmente dentro de Elementor, así que lo obtienes efectos de desplazamiento de imagen simples sin abrir un editor de código. Si desea ver el resto del kit de herramientas, explore Widgets y extensiones de complementos maestros o el Funciones de animación de Elementor.
30 animaciones flotantes, 8 de ellas gratuitas
Las primeras impresiones ocurren al pasar el cursor. Obtienes una biblioteca de animaciones CSS que aportan tu título y descripción sin problemas, por lo que el texto llega en lugar de simplemente aparecer en la pantalla. Aplique cualquier efecto con un clic y luego recorra el editor hasta que se adapte a la imagen. Normalmente pruebo tres o cuatro antes de instalarme, ya que un efecto que se ve muy bien en una toma de paisaje amplio puede sentirse mal en un retrato ajustado.
- Desvanecerse y hacer zoom: la imagen se desvanece o aumenta mientras el texto se desvanece.
- Deslizar (arriba, abajo, izquierda, derecha): un panel de subtítulos se desliza desde cualquier borde.
- Empujar y revelar: la imagen se desplaza para dejar espacio para el título y la descripción.
- Flotar y brillar: un pequeño ascensor y un ligero barrido a lo largo de la imagen.
- Ocho efectos son gratuitos: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey y Oscar. Pro suma 22 más, de Marley a Duke.
- Se ejecuta en CSS: el movimiento se mantiene suave porque no se apoya en scripts pesados.
- Rápido de probar: intercambie efectos en el editor y vea el cambio de inmediato.
Ejemplos de efectos de imagen flotante
Mueva el puntero sobre cada tarjeta, o tóquelo en un teléfono para ver el efecto. Estos ocho son los efectos que funcionan sin Pro, y cada tarjeta es un widget de efectos de desplazamiento de imagen en vivo.
Ella y Sam
Somerset · junio
de lirio
Grecia
11 días
sata
planta principal
Cardio y máquinas
roxido
imagen
12,400 millas
bubba
Casa del acantilado
4 camas · EPC B
Romeo
Muro de la galería
Brístol · 2025
laina
Iniciadores Nueve platos
recoger miel
Ropa exterior
87 piezas
óscar
Los 30 efectos de desplazamiento de imagen
El desplegable Efecto de desplazamiento enumera 30 efectos por nombre. Cada uno anima el título y la descripción sobre la imagen, y difieren en cómo se mueven la superposición, el texto y la imagen.
| Efecto | necesita profesional | Efecto | necesita profesional |
|---|---|---|---|
| de lirio | prohibido | Julia | Sí |
| sata | prohibido | Goliat | Sí |
| roxido | prohibido | herrar | Sí |
| bubba | prohibido | Winston | Sí |
| Romeo | prohibido | selena | Sí |
| laina | prohibido | de riego | Sí |
| recoger miel | prohibido | FEBE | Sí |
| óscar | prohibido | Apolo | Sí |
| margaso | Sí | misterio | Sí |
| de color rubí | Sí | Steve | Sí |
| mil lotos | Sí | Moisés | Sí |
| diestro | Sí | disparates | Sí |
| saraoh | Sí | aglutinante | Sí |
| zoé | Sí | lesxible | Sí |
| chico | Sí | duque | Sí |
Enlaces inteligentes y contenido emergente al hacer clic
Tú decides qué sucede cuando alguien hace clic en la tarjeta. Apúntelo a cualquier URL con un enlace estándar o, con Pro, cambie la acción a Ventana emergente y mantenga a las personas en la página. La ventana emergente tampoco se limita al texto: establezca el tipo de contenido en Sección guardada y extrae cualquier plantilla de Elementor que ya hayas creado. Eso convierte una tarjeta de imagen en una puerta de entrada a una biografía completa, una hoja de especificaciones del producto o un formulario de contacto, y el visitante nunca sale de la página.
- Acțiuni de două clics: envíe tráfico con un enlace o mantenga a las personas en el sitio con una ventana emergente (Pro).
- Plantillas reales en la ventana emergente (Pro): muestra una imagen, texto o un diseño completo de tu biblioteca.
- Burlați, atunci spune: la imagen es el gancho y la ventana emergente lleva el detalle.
Texto sobre imagen: título, descripción y estilo de superposición
Controlas cómo mira la tarjeta hasta el detalle. Cargue su imagen y establezca su opacidad y filtre por separado para los estados normal y flotante. Agregue un encabezado (elija la etiqueta HTML correcta para que ayude a la estructura de su página) y una descripción, luego diseñe cada pieza por sí sola con sus propios colores, tipos, sombras y espacios.
- Título y descripción separados: peina cada uno para que la jerarquía se lea claramente.
- Filtros de imagen: el truco de escala de grises a color en el vuelo estacionario todavía se ve bien y aquí es un cambio de una sola configuración.
- Marco de tarjeta: fondo, bordes y sombras de caja, además de esquinas redondeadas y acolchado con Pro, por lo que se adapta perfectamente a tu diseño.
Opciones de Hover de Elementor frente al widget de efectos de desplazamiento de imagen
El widget de imagen propia de Elementor tiene configuraciones de desplazamiento en la pestaña Estilo: opacidad, filtros CSS y una animación de desplazamiento como crecer o Pulse. Cambian la imagen en sí. No pueden poner texto sobre la imagen, que es el espacio que llena este widget.
| Widget de imagen de elemento | Widget de efectos de desplazamiento de imagen | |
|---|---|---|
| Opacidad en el flotante | Sí | Sí |
| Filtros CSS en el cursor | Sí | Sí |
| Animación flotante | Presets que mueven toda la imagen | 30 efectos que animan la superposición, el título y la descripción |
| texto sobre la imagen | prohibido . El pie de foto se encuentra debajo de la imagen. | Título y descripción en la imagen |
| Texto que aparece en el cursor | prohibido | Sí |
| Haga clic en acción | enlace o caja de luz | enlace o una ventana emergente con Pro |
| Cambiar a una segunda imagen en el cursor | prohibido | prohibido .Usar Imagen avanzada por eso |
Efectos de imagen flotante de un vistazo
Los principales hechos sobre el widget en una tabla.
| Característica | Efectos de desplazamiento de imagen |
|---|---|
| Efectos flotantes | 30. 22 de ellos necesitan Pro. |
| Texto en la imagen | Título y descripción, con una etiqueta HTML de H1 a H6 para el título |
| Haga clic en acción | Ninguno, un enlace o una ventana emergente (Pro) |
| Contenido emergente (Pro) | texto, una imagen o una sección guardada, widget o plantilla de página |
| Configuración de imagen | Opacidad y filtros, configurados por separado para normal y flotante |
| Segunda imagen en el vuelo | prohibido |
| Pantallas táctiles | El primer toque muestra el texto. El segundo grifo sigue el enlace. |
| Necesidades | Complementos Elementor y Master |
¿cómo agregar efectos de desplazamiento de imagen en Elementor?
Puedes tener una tarjeta flotante que funcione en menos de dos minutos. Sin CSS, sin códigos cortos.
- Instale y active complementos maestros, luego edite cualquier página con Elementor.
- Busque en el panel de widgets Efectos de desplazamiento de imagen y arrástrelo a su diseño.
- Sube tu imagen y agrega un título y descripción.
- Abra el menú desplegable Hover Effect y elija una animación. Ocho son gratis y 22 más vienen con Pro.
- Configure la acción de clic en un enlace o en una ventana emergente con una plantilla guardada si tiene Pro.
- Diseñe el título, la descripción y el contenedor y luego publíquelos.
Una cosa que vale la pena hacer antes de publicar: obtener una vista previa de la tarjeta en un teléfono. El desplazamiento no existe al tocar, así que verifique que el comportamiento de toque tenga sentido (más sobre eso en las preguntas frecuentes). Para cada configuración establecida en orden, siga el Documentación de efectos de desplazamiento de imagen.
¿dónde utilizar los efectos flotantes en las imágenes?
- Cuadrículas del equipo: nombre y función al pasar el cursor, luego una biografía completa en una ventana emergente al hacer clic. Aquí está cómo crear una sección de miembros del equipo.
- Portafolios y galerías: un título de proyecto y un enlace “Ver estudio de caso” sobre cada foto.
- Tarjetas de servicio: una breve descripción y un enlace a la página de servicio.
- Vizualizaciones de productos: muestre la imagen del producto y luego abra las especificaciones en una ventana emergente.
- Azulejos de blog y categoría: un título flotante sobre navegación basada en imágenes.
Para conocer más formas de juntar texto e imágenes, lea 25 técnicas de texto sobre imagen de Elementor. Los widgets de imágenes relacionados incluyen Carrusel de imágenes, el Galería de imágenes filtrables, el Punto de acceso de imagen widget y el Imagen avanzada Widget.
Preguntas frecuentes sobre los efectos del desplazamiento de imágenes
¿funcionarán estos efectos flotantes en dispositivos móviles?
Están diseñados para computadoras de escritorio, donde hay un mouse para pasar el rato. En una pantalla táctil, el efecto generalmente se activa en el primer toque para mostrar el contenido, y el segundo toque sigue el enlace o abre la ventana emergente. Así que planifique dos toques en el móvil y asegúrese de que el texto siga siendo legible una vez que se muestre.
¿cómo creo efectos de desplazamiento de imágenes simples sin escribir CSS?
Deje caer el widget Image Hover Effects en su página, cargue una imagen, agregue un título y una descripción y elija una animación del menú desplegable. Eso es todo, no hay CSS. El widget escribe el CSS para usted detrás de escena, por lo que incluso una tarjeta flotante bastante complicada sigue siendo fácil de armar.
¿Puedo abrir la biografía de un equipo o los detalles del producto en una ventana emergente al hacer clic?
Sí, con Pro. Coloque el nombre en el Título y el rol en la Descripción, configure la acción de clic en Ventana emergente y elija Tipo de contenido: Sección guardada. Cree la biografía como plantilla en Elementor y selecciónela aquí. Haga clic en la foto y ese diseño completo se abrirá en la ventana emergente.
¿los 30 efectos de desplazamiento de imágenes son gratuitos?
No. Ocho efectos son gratuitos: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey y Oscar. Los otros 22 vienen con Master Addons Pro, junto con contenido emergente, esquinas redondeadas y controles de relleno. El título, la descripción, el enlace y los filtros de imagen funcionan en la versión gratuita.
¿Cómo muestro texto cuando alguien pasa el cursor sobre una imagen en Elementor?
Agregue el widget de efectos de desplazamiento de imagen, suba la imagen, escriba un título y una descripción y elija un efecto de desplazamiento. El texto permanece oculto hasta que el puntero está sobre la imagen y luego se anima. El widget de imagen propio de Elementor no tiene ninguna configuración para el texto sobre la imagen.
¿muchas tarjetas de imágenes animadas ralentizarán mi sitio?
Los efectos se ejecutan en CSS, por lo que un puñado en una página no es un problema. Lo que realmente ralentiza las cosas es el peso de la imagen, así que comprime tus imágenes primero. Una vez que hayas pasado aproximadamente 20 tarjetas en una página, activa la carga diferida y la primera pintura se mantiene rápida.
¿puedo usar diferentes efectos flotantes en diferentes imágenes?
La configuración cubre una tarjeta a la vez. Para mezclar efectos, agregue un widget separado de efectos de desplazamiento de imagen para cada imagen y configúrelo de forma independiente. Así es como obtienes una galería donde no todas las tarjetas se animan de la misma manera.
¿cuál es el beneficio de una "Sección guardada" en la ventana emergente sobre texto sin formato?
La sección guardada es una opción profesional y le brinda el editor Elementor completo dentro de la ventana emergente. En lugar de texto sin formato, puede agregar imágenes, botones, columnas, videos o formularios, por lo que la ventana emergente se parece al resto de su sitio en lugar de a un cuadro de texto simple.
¿Cómo hago zoom en una imagen en el mouse en Elementor?
Para un zoom simple, seleccione el widget de imagen de Elementor, abra la pestaña Estilo y establezca la animación de desplazamiento en crecimiento. En el widget de efectos de desplazamiento de imagen, varios efectos escalan la imagen mientras que el título y la descripción aparecen.
¿Puedo cambiar la imagen en el cursor del mouse?
No con este widget. Mantiene una imagen y anima la superposición y el texto encima de ella. Para cambiar a una segunda imagen en el cursor, utilice el Imagen avanzada widget y activar la imagen de la pantalla flotante.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
