Efecto Hover en imágenes y tarjetas en Divi sin plugins

Con este tutorial lograrás realizar un diseño personalizado donde al momento de hacer "hover" sobre ese diseño aparezca la información personalizada que quieras.

Puedes ver aquí un el ejemplo que logramos en vivo:

¿Qué necesitas para hacer las imágenes "hover"?

• Un sitio web hecho con Divi
• Una página nueva
• Imágenes y contenido que quieras presentar en este diseño

Paso 1: Creamos y adaptamos las filas en una sección

Creamos una sección y una fila de 3 columnas, y en cada columna debes configurar una imagen de fondo, te recomiendo que coloques una imagen que tenga formato "portada" o vertical, para que se acople correcta a tu diseño.

Importante: en las configuraciones de la fila debes colocar "igualar la altura de las columnas" de manera que queden todas las imágenes del diseño del mismo tamaño.

También importante, vamos a colocar un módulo de "anuncio" para darle una altura a la columna y poder trabajar sobre las columnas y sus configuraciones.

Paso 2: Configurar la columna con el efecto "hover"

Una vez que tengamos esto configurado, vamos a cada una de las columnas y configuramos el efecto "hover". Para ello nos vamos a Diseño > sombra de la caja y allí configuramos la sombra de caja de manera interna.

Allí, vamos a configurar las opciones de sombra de la caja en valores "0" para los efectos de "hover" cuando el mouse no está sobre el elemento y el color de la sombra completamente en "negro" o "#000"

Luego, para las opciones "hover" colocamos las siguientes configuraciones:

De esa manera, el fondo completo de la columna se oscurecerá cuando pase el mouse por arriba.

Paso 3: Configuramos el módulo de anuncio

Aquí procedemos a configurar el módulo de anuncio con un icono, un titulo y un texto. Además de eso, colocaremos un enlace que active todo el módulo.

La clave acá es que usemos también los efectos "hover" para todos los elementos del módulo de anuncio, donde por ejemplo podemos poner todos estos elementos transparentes en su vista normal, y luego en "hover" configuremos estos elementos en color blanco (o el color que quieras)

Aprende a crear efectos scroll potentes todo únicamente con el poder de Divi. Revisa nuestro tutorial premium de scroll effects donde te enseñamos a usar esta opción de manera profesional.

También es importante que configuremos el módulo de anuncio de tal manera que cubra toda la columna, así, de esa forma, cuando el usuario pase el mouse por cualquier parte de la imagen de fondo, se activará el efecto hover de la misma, y además, se activará el efecto hover también del módulo de anuncio.

Si quieres ver todos estos detalles, te recomendamos ver el video, y además te dejamos una imagen muestra:

¡Y listo! Con esto conseguirás tener unas imágenes o tarjetas con estilos "hover" en tu sitio web hecho con Divi sin ningún tipo de plugins.

Recomendado: Como hacer el efecto parallax en móvil para el tema Divi

Por qué usar hover effects mejora la experiencia de usuario

Más allá de lo estético, los efectos hover cumplen una función importante en la usabilidad de tu sitio web. Cuando un elemento reacciona visualmente al movimiento del cursor, le indica al usuario de forma implícita que ese elemento es interactivo y que puede hacer clic en él. Es una señal de affordance, un término del diseño de experiencia de usuario que describe cuándo un objeto comunica por sí solo cómo se usa.

En el contexto de tarjetas con imágenes de fondo, esto es especialmente valioso. Las tarjetas sin ninguna reacción hover pueden parecer elementos decorativos, y el usuario puede no darse cuenta de que son clicables. Al agregar ese oscurecimiento progresivo del fondo y la aparición del texto informativo, estás guiando activamente la atención del usuario hacia la acción que deseas que tome.

También hay un beneficio directo en las métricas del sitio. Los efectos hover bien implementados reducen la tasa de rebote porque aumentan el tiempo de interacción en página. El usuario se detiene a explorar los elementos, a pasar el mouse por las tarjetas, a leer la información que aparece. Eso se traduce en sesiones más largas y en mejores señales de comportamiento para el posicionamiento en buscadores.

Cómo adaptar este efecto para diferentes tipos de contenido

La técnica que vimos en este tutorial nació pensada para galerías de imágenes, pero es perfectamente adaptable a muchos otros casos de uso dentro de Divi. Con pequeñas variaciones en la configuración puedes aplicarla a portfolios, catálogos de productos, presentaciones de equipos, o secciones de servicios.

Para portfolios o galerías de proyectos, el efecto hover es prácticamente estándar en la industria del diseño web. Aquí la recomendación es que el texto que aparece en el hover sea el nombre del proyecto y la categoría, sin más. La sobrecarga de información en el hover arruina la elegancia del efecto. Menos es más.

Para catálogos de productos la lógica cambia un poco. En este caso el hover puede mostrar el precio y un botón de "Ver producto" que lleve directamente a la ficha. Esto agiliza el proceso de exploración del catálogo porque el usuario puede ver el precio sin necesidad de entrar a cada página de producto individualmente.

Consejo: Para secciones de equipo, coloca la foto del miembro como imagen de fondo de la columna y muestra en el hover su cargo, una frase breve y los íconos de redes sociales. Es una de las presentaciones más elegantes que puedes lograr en Divi sin plugins.

Para páginas de servicios la variante más efectiva es usar el hover para mostrar una descripción corta del servicio y un CTA directo. La imagen de fondo puede ser una fotografía representativa del servicio o simplemente un color sólido de tu paleta de marca. La consistencia visual entre tarjetas es clave aquí: si mezclas fotos con colores sólidos sin un criterio claro, el diseño pierde coherencia.

Transiciones: el detalle que separa lo amateur de lo profesional

Uno de los aspectos que más diferencia un efecto hover bien ejecutado de uno mediocre es la configuración de las transiciones. Divi tiene opciones de transición en casi todos sus módulos, pero si no las usas de manera consciente el resultado puede parecer brusco o descoordinado.

La regla general que yo sigo es esta: todas las propiedades que cambian en hover deben transicionar al mismo tiempo y con la misma curva de aceleración. Si el fondo oscurece en 0.3 segundos pero el texto aparece en 0.5 segundos, el efecto se ve roto aunque técnicamente funcione. La coherencia temporal es lo que da esa sensación de pulido y atención al detalle.

En las opciones nativas de Divi, cuando configuras el color o la opacidad en el modo hover, el constructor aplica por defecto una transición de 300ms. Para efectos simples como el cambio de color de fondo eso está bien. Pero cuando el efecto involucra múltiples propiedades (el fondo, el texto, los íconos), es conveniente alinear todos los tiempos manualmente desde las opciones avanzadas de transición del módulo.

Consejo: Evita las transiciones muy largas en elementos que tienen CTA (llamadas a la acción). Si el botón tarda 0.8 segundos en aparecer completamente en el hover, el usuario puede hacer clic antes de que sea visible y frustrarse. Para CTAs dentro de efectos hover, 0.3 a 0.4 segundos es el rango ideal.

Consideraciones para dispositivos móviles

Aquí viene la parte que muchos tutoriales ignoran: los efectos hover no existen en dispositivos táctiles. En un teléfono o tablet no hay cursor, así que nunca se activa el estado hover. Esto significa que si tu diseño depende exclusivamente del hover para mostrar información importante, esa información será invisible para los usuarios móviles.

La solución más práctica es pensar el diseño en dos capas. En escritorio, el hover muestra el texto y oscurece el fondo. En móvil, esa misma información debería estar visible por defecto, quizás con una barra semitransparente en la parte inferior de la tarjeta que muestre el título y el CTA sin necesidad de interacción.

Divi te permite configurar esto usando las opciones de visibilidad responsiva. Puedes crear dos versiones del módulo de anuncio: una con opacidad 0 (invisible por defecto, visible en hover) para escritorio, y otra con opacidad visible para móvil. Usando las opciones de visibilidad por dispositivo de Divi, cada versión solo se muestra donde corresponde.

🎓 Si quieres dominar Divi a fondo y aprender a crear efectos interactivos como este, explora los cursos en uxdivi.com/cursos/ — desde los fundamentos hasta técnicas de nivel profesional.

Conclusión

Los efectos hover en imágenes y tarjetas son una de las técnicas de diseño web más efectivas para agregar interactividad y profesionalismo a un sitio hecho con Divi sin necesidad de instalar ningún plugin. Con las opciones nativas de sombra de caja, configuración de hover y el módulo de anuncio, tienes todo lo necesario para crear tarjetas que reaccionen de manera elegante al movimiento del cursor.

Lo más valioso de este enfoque es que es completamente visual y no requiere escribir ni una línea de código. Todo se configura desde el constructor de Divi, lo que significa que puedes iterar rápidamente, probar diferentes combinaciones de colores y timing, y ajustar el resultado en tiempo real. Eso es exactamente el tipo de flexibilidad que hace a Divi una herramienta tan poderosa para diseñadores que quieren resultados profesionales sin depender de desarrolladores.

Si tienes alguna duda sobre alguno de los pasos o quieres compartir el resultado que lograste con este tutorial, déjame un comentario aquí abajo. Y si te resultó útil, compártelo con tu comunidad de diseñadores web — siempre es bueno que más gente descubra estas posibilidades.

🎓 ¿Listo para llevar tus diseños con Divi al siguiente nivel? En uxdivi.com/cursos/ encontrarás cursos completos que te enseñan a sacar el máximo provecho de cada herramienta del constructor.