Changing a column background image in Hover in Elegant Themes Divi

So I am sure by now we have all learnt a bit about how to use the built in hover effects within the Elegant Themes Divi Module. But what happens when this doesn’t solve the problem you have or hit the brief from your clients.

You will see in the video to the right how you can make text visible on hover as has been covered by many a tutorial by Elegant themes and others. However i wanted to make changes to the back ground image to highlight the areas of the body as hover happened. (See the end result here)

After a lot of googling and playing around with different methods I stumbled across a post that did something similar with JQuery but worked on the whole column. I needed it to be triggered by hover on a column element to then change the column image dependant on the section that is hover on.

 

After Posting in one of the facebook Groups I got some Support from a top bloke called Andrew who helped me make some changes to the JQuery I had to get everything working.

 

standard divi hover to display text

I already had my page layout constructed with a row containing two columns each having a few text elements in to represent the different area of the body. You will also See a code section labeled JQuery Hover Code, I’ll come back to that.

Back Ground Image assigned as the base image

The next step was to give each element it’s own ID to be able to target them individually. You will see from the images below I gave the column an ID of my_col_1 and I gave each text element in the column an ID of my_box_1 to my_box_4

Getting back to that JQuery Code then…. In the code block you can see in the initial Image on the page you need to add a function for each of the hover effects you want…. The function needs to change the background image on hover, but then also reset it as the mouse moves off the section. The function using my labels looks like this –

 

$(function() {
$(‘#my_box_1’).hover(function() {
$(‘#my_col_1’).css(‘background-image’, ‘url(http://yourdomain.com/wp-content/uploads/2019/1/Front-Upper-1.jpg)’);
}, function() {
// on mouseout, reset the background colour
$(‘#my_col_1’).css(‘background-image’, ‘url(http://yourdomain.com/wp-content/uploads/2019/1/Front.jpg)’);
});
});

You need to create one of these functions for each element in the column. putting the functions together inside <script> tags

The End Result

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This
× How can I help you? Available from 08:00 to 20:00