Colocar el cursor sobre la imagen de DiviEfectos
Tarjeta invertida
Deslizar
Efectos de desplazamiento de imagen Divi: 15 animaciones
Transforma tus imágenes en experiencias interactivas. Divi Image Hover Effects es unamódulo nativo Divi 5que agrega impresionantes animaciones al pasar el mouse y superpone contenido a cualquier imagen, directamente dentro de Divi Visual Builder, sin necesidad de codificación.
🃏 Tarjetas invertidas: integradas
Voltear horizontalmenteconvierte tu imagen en una verdaderatarjeta plegable 3D: el frente muestra su imagen, la parte posterior revela su contenido superpuesto con un cambio de perspectiva satisfactorio. Perfecto para miembros del equipo, piezas de portafolio, exhibiciones de productos o cualquier situación en la que desee revelar información con impacto.
🎬 15 efectos de desplazamiento hechos a mano
- Desteñir— revelación de opacidad clásica con un sutil aumento de contenido
- Deslizar hacia arriba / abajo / izquierda / derecha— diapositivas superpuestas direccionales
- Dar un golpe de zoom— la imagen aumenta a medida que aparece la superposición
- Alejar— la imagen comienza ampliada y retrocede al pasar el cursor
- Voltear horizontalmente— volteo de tarjeta 3D completo con perspectiva
- Difuminar— la imagen se suaviza a medida que el contenido ocupa un lugar central
- Escala de grises— la imagen se desatura al pasar el mouse para lograr un contraste sorprendente
- Brillar— un ligero resplandor recorre la imagen
- Rebotar— el revestimiento salta desde abajo con energía elástica
- Mostrar izquierda → derecha— revelación de ruta de clip estilo cortina
✨ Contenido enriquecido superpuesto
Cree su superposición visualmente, exactamente como la desea:
- Fondo superpuesto: color sólido o completogradiente(color inicial, color final, dirección)
- Posición del contenido9 puntos de anclaje(arriba a la izquierda, centro, abajo a la derecha…)
- Ícono: elige cualquier ícono de Divi, establece su color y tamaño
- Título: elija la etiqueta HTML (H1–H6 o P) y ajústela completamente
- Descripción: cuerpo del texto con control tipográfico completo
- Botón de llamada a la acción: URL, compatibilidad con nuevas pestañas y elpanel de diseño de botones Divi completo(fondo, borde, fuente, espaciado, tamaño, sombra del cuadro)
⚙️ Controles de animación de precisión
Ajusta todo directamente en Visual Builder sin salir de tu página:
- Animaciónvelocidad— cualquier duración CSS válida (
0.3s,500ms…) - Animaciónfacilitando— Facilitar, facilitar la entrada, facilitar la salida, facilitar la entrada y salir, lineal
🎨 Personalización completa del diseño Divi
Debido a que Divi Image Hover Effects es un verdadero módulo nativo de Divi 5, obtienes acceso acompleto sistema de diseño Divi- las mismas herramientas que usas en todos los demás módulos:
- Controles de tipografía para título, descripción y botón.
- Fondos, degradados e imágenes en el módulo.
- Bordes, sombras de cuadro y radio de borde
- Espaciado (margen
- Filtros, transformaciones y animaciones.
- Posicionamiento fijo, efectos de desplazamiento e índice z
- Visibilidad responsiva y CSS personalizado por punto de interrupción
Todo lo que esperas de un módulo Divi, listo para usar.
🔍 Vista previa de True Visual Builder
La superposición siempre está visible en el lienzo para que puedas editar tu contenido cómodamente. Activarmodo flotanteen el panel Diseño para obtener una vista previa de los estilos de desplazamiento (colores, transiciones y animaciones de giro) exactamente como los verán sus visitantes.
♿ Rendimiento
- Las imágenes usan nativas.carga diferidapara velocidades de página rápidas
- Animaciones automáticamentedesactivar para usuarios que prefieren movimiento reducido(
prefers-reduced-motion) - Transiciones aceleradas por GPU para una representación sedosa de 60 fps
📋 Requisitos
- Divi 5 (no compatible con Divi 4)
- WordPress 6.0
- PHP 7.4
