Divi Tips n°126

How to change an image on mouseover?

Published on 12/01/2022 | 6 comments

736 words


You can easily play with the hover options offered by Divi. This is called "hovering " in web design... For example, you can make a zoom in on an image as we saw in a previous tutorial. You can change the colour of a text or a background... But today, I'll show you how to change an image on mouseover.

👉 Difficulty: zero!

👉 Duration: coffee time!

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - What is the "hover" or "mouse-over"?

Is it really necessary to explain what HOVER is? If you are a webdesigner, you know what it is... But if you are from the ice age, here is a little definition:

Hovering is the act of displaying a different state or status to an element when the user hovers over it.

It is very common to create original layouts: change the colour, change the size, change the position, etc.

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

2 - Change an image on mouseover in 3 clicks

The advantage is that Divi offers hover options in each module and the Image module is no exception to the rule, of course!

So, have you ever thought about changing an image when you move the mouse? It's possible and it's very easy:

  1. Add an image module within your layout with the Visual Builder
  2. Import your first image, we'll call it the "A" image
  3. Activate the hover option by clicking on the arrow icon.
  4. Select the Hover tab, mistranslated) and import your second image, image "B".
Ajouter un module image
Add an image module to your layout
importer l'image A
First, import the "A" image
importer image B
Activate the hover options and import the "B" image

That's it!

Nothing could be simpler, could it?

Feel free to check both tabs (Desktop tab and Float tab) to make sure both images are in the right places.

activer les bons onglets
Check the images in each tab

3 - Tips for a successful effect

You will notice that for the effect to be successful, it is best to use two images that overlap perfectly.

For my example, I duplicated the same image twice and then changed the colour and added graphic elements. I did this using two software programs:

  • Affinity Photo to crop the image and change the colour
  • Affinity Designer to add graphic elements

As I explain in the following video, it took me longer to make these images than to integrate them into Divi.

This reminds us that a good layout and design does not rely exclusively on the technical side of creating the site... On the contrary: your content - your texts and images - will make all the difference! Then, Divi will allow you to integrate them easily...

4 - Changing the image on mouse-over: the video tutorial

Here's the video recap... Since this is a very short Divi tutorial, I took the opportunity to add, as a bonus, the design of these two images at the end of the video... So if you're curious, watch the whole video!

Don't delay! Discover the Divi theme here !

5 - Hover options available in all Divi modules

As a reminder, hover options are available in every Divi module! Just hover your mouse next to the module title to see the hover icons and other options appear... So don't hesitate to use them!

By the way, this is also where you can activate the phone icon that allows you to pixel-perfect management of responsive of each module. I can't say it enough: look hard, all the options are there, in front of you 😉

Want to customize Divi like a pro? Check out all the tutorials!

6 - To go further

To go further with Divi's Hover feature, here is a small list of tutorials:

image hover divi ok
image survol divi ok
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

6 Commentaires

  1. Meyer Michel

    Hello Licia, voilà tu as fait un nouveau adepte 😉 en tous cas c’est chouette ton aide que tu apportes et un grand Merci pour tes nombreux tutos.
    Ici sur ce tuto, je pourrais être tenté, sauf ce qui me gène au passage de la souris pour le changement d’image, c’est ce petit « flash » blanc qu’il y à et ça donne un rendu pas du tout fluide entre les deux images. Dommage l’idée est intéressante !

  2. Meyer Michel

    Finalement ça passe bien avec l’essaie que j’ai fait, la transition est fluide 😉

  3. Lycia Diaz

    Oui je vois ce que tu veux dire… tu as certainement raison

  4. Lycia Diaz

    Ah super !

  5. Laura

    Bonjour Lycia,
    J’aimerais mettre une image survolée (donc deux images,) dans mon menu entête à la place du mot boutique et dans un de mes menus pied de page, ou si pas possible à côté du menu entête.
    L’astuce image Visual Builder module n’est pas applicable dans ce cas.
    Avez vous une solution à me proposer svp ?

  6. Lycia Diaz

    Oui je vois. Pas d’idées à part bidouiller avec du CSS

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Share This