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:
- Add an image module within your layout with the Visual Builder
- Import your first image, we'll call it the "A" image
- Activate the hover option by clicking on the arrow icon.
- Select the Hover tab, mistranslated) and import your second image, image "B".



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.

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:
- Another way to change the image on hover
- How to scroll an image on mouse-over
- How to add a Tilt effect to the hover (wow, I love it!)
- How to display the summary of an article on mouse-over
- How can I create a zoom effect on an image with clickable text over it?
- How to replace a client's logo with a client testimonial on mouseover?


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 !
Cordialement
Michel
Finalement ça passe bien avec l’essaie que j’ai fait, la transition est fluide đ
Oui je vois ce que tu veux dire⊠tu as certainement raison
Ah super !
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 ?
Oui je vois. Pas dâidĂ©es Ă part bidouiller avec du CSS
Bonjour !
AprĂšs quelques annĂ©es chez shopify, je commence Ă me familiariser avec Divi que je trouve intĂ©ressant au niveau seo. Mais je dĂ©sespĂšre Ă ne pas trouver une astuce ou module pour savoir comment afficher une seconde image au survol dâun produit !
Avec le thĂšme Dawn de shopify, cette fonction est proposĂ©e naturellement mais lĂ avec Divi, je n’ai rien trouvĂ© sur ce sujet. Auriez-vous une info sur ce sujet ou faudra-t-il retourner Ă l’Ăąge de glace ? đ
Merci d’avance pour votre aide.
Eh bien non, il nây a pas dâoption pour ça. DâoĂč ce tutoriel. Peut-ĂȘtre quâun plugin tiers propose ça ? Peut-ĂȘtre Divi SuprĂȘme ? Ă voirâŠ
J ai un soucis avec mes images sur Divi, mes image sont grisées a 50 % . Que faire
Je ne sais pas, je suppose qui faut inspecter votre site pour mieux comprendre ce qu’il se passe. Il doit y avoir un dĂ©gradĂ© de paramĂ©trĂ© quelque part.