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
$(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
