How to change an image on mouseover?

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".

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?