¿Cómo cambiar una imagen al pasar el ratón por encima?

Puedes jugar fácilmente con las opciones de hover que ofrece Divi. Esto se llama "hovering " en diseño web... Por ejemplo, puedes hacer un ampliar una imagen como vimos en un tutorial anterior. Puedes cambiar el color de un texto o de un fondo... Pero hoy, te mostraré cómo cambiar una imagen al pasar el ratón.

👉 Dificultad: ¡cero!

👉 Duración: ¡la hora del café!

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es el "hover" o "mouse-over"?

¿Es realmente necesario explicar qué es HOVER? Si eres diseñador web, ya sabes lo que es... Pero si eres de la edad de hielo, aquí tienes una pequeña definición:

Pasar por encima es el acto de mostrar un estado diferente a un elemento cuando el usuario pasa por encima de él.

Es muy común crear diseños originales: cambiar el color, cambiar el tamaño, cambiar la posición, etc.

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

2 - Cambiar una imagen al pasar el ratón por encima en 3 clics

La ventaja es que Divi ofrece opciones de hover en cada módulo y el Módulo de imagen no es una excepción a la regla, por supuesto.

¿Has pensado alguna vez en cambiar una imagen al mover el ratón? Es posible y muy fácil:

1. Añade un módulo de imagen dentro de tu diseño con el Visual Builder
2. Importe su primera imagen, la llamaremos imagen "A".
3. Active la opción hover haciendo clic en el icono de la flecha.
4. Seleccione la pestaña Hover, traducido erróneamente) e importe su segunda imagen, la imagen "B".

¡Eso es!

Nada podría ser más sencillo, ¿verdad?

No dude en comprobar ambas pestañas (la del Escritorio y la del Flotador) para asegurarse de que ambas imágenes están en los lugares correctos.

3 - Consejos para un efecto exitoso

Verás que para que el efecto tenga éxito, lo mejor es utilizar dos imágenes que se superpongan perfectamente.

Para mi ejemplo, he duplicado la misma imagen dos veces y luego he cambiado el color y añadido elementos gráficos. Lo hice utilizando dos programas de software:

• Affinity Photo para recortar la imagen y cambiar el color
• Affinity Designer para añadir elementos gráficos

Como explico en el siguiente vídeo, me llevó más tiempo hacer estas imágenes que integrarlas en Divi.

Esto nos recuerda que una buena maquetación y un buen diseño no dependen exclusivamente de la parte técnica de la creación del sitio... Al contrario: su contenido -sus textos e imágenes- marcarán la diferencia. Entonces, Divi le permitirá integrarlos fácilmente...

4 - Cambiar la imagen al pasar el ratón por encima: el video tutorial

Aquí está la recapitulación del vídeo... Como se trata de un tutorial de Divi muy corto, he aprovechado para añadir, como extra, el diseño de estas dos imágenes al final del vídeo... Así que si tienes curiosidad, ¡mira el vídeo completo!

No se demore. Descubra el tema Divi aquí !

5 - Opciones Hover disponibles en todos los módulos de Divi

Como recordatorio, las opciones de hover están disponibles en todos los módulos de Divi. Basta con pasar el ratón por encima del título del módulo para que aparezcan los iconos de desplazamiento y otras opciones... ¡Así que no dude en utilizarlos!

Por cierto, aquí también puedes activar el icono del teléfono que te permite gestión perfecta de la respuesta de cada módulo. No me canso de decirlo: busca bien, todas las opciones están ahí, delante de ti 😉 .

¿Quieres personalizar Divi como un profesional? Consulta todos los tutoriales.

6 - Para ir más lejos

Para ir más allá con la función Hover de Divi, aquí hay una pequeña lista de tutoriales:

• Otra forma de cambiar la imagen al pasar por encima
• Cómo desplazar una imagen al pasar el ratón por encima
• Cómo añadir un efecto de inclinación al hover (¡vaya, me encanta!)
• Cómo mostrar el resumen de un artículo al pasar el ratón por encima
• ¿Cómo se crea un efecto de zoom al pasar el ratón por encima de una imagen con un texto clicable en la parte superior?
• ¿Cómo sustituir el logotipo de un cliente por un testimonio del cliente al pasar el ratón por encima?