Beach

Wonderful sunny beaches.

Mountains

Rejunevate your spirit.

Nature

Calm of the forest.

Change the background image upon hovering hero section

No extra plug-ins required! Elementor Free Compatible.

Mobile viewers: visit the desktop version to see the working demo!

Someone in the Facebook group asked how to make this: a smooth background image change on hover of any Elementor element. Here it is!

To begin with, create a new section with these settings

You can change these to fit your design.

Great Design - Change Background Image on Hover in Elementor

Add the basic background image to the section

Adjust the position, repeat and size settings. The same settings will be used by the other background images.

Great Design - Change Background Image on Hover in Elementor

Then, add a background overlay and adjust the opacity

Great Design - Change Background Image on Hover in Elementor

Give this main section a CSS ID.

In this example, 'naturesection' is the CSS ID.

Great Design - Change Background Image on Hover in Elementor

Create your elements in the section

In this case, I used the Icon Box element, with buttons below them.

Give a class name to each column

Upon hovering any point in the column, the background will change image.

Here, they are called respectively 'beach' , 'mountain' and 'nature' .

Great Design - Change Background Image on Hover in Elementor

Create a new section with the hidden background images

This is to preload them in the viewers' browsers. It will avoid the 'white flash' before the images are loaded. Simply use the Image element, set Image Size to 'full'.

Great Design - Change Background Image on Hover in Elementor

Hide this new section for all viewports.

The images will still preload.

Great Design - Change Background Image on Hover in Elementor

Finally, add this code in an html element

Replace the appropriate class names and CSS ID with your own.

Change the links to link your own images.

<script>

jQuery(document).ready(function($) {
$('.beach').mouseenter(function() {
$('#naturesection').css('background-image','url(/wp-content/uploads/2019/09/beach.jpg)');
});
$('.beach').mouseleave(function() {
$('#naturesection').css('background-image','url(/wp-content/uploads/2019/09/aigle.jpg)');
});
$('.mountain').mouseenter(function() {
$('#naturesection').css('background-image','url(/wp-content/uploads/2019/09/mountain.jpg)');
});
$('.mountain').mouseleave(function() {
$('#naturesection').css('background-image','url(/wp-content/uploads/2019/09/aigle.jpg)');
});
$('.nature').mouseenter(function() {
$('#naturesection').css('background-image','url(/wp-content/uploads/2019/09/nature.jpg)');
});
$('.nature').mouseleave(function() {
$('#naturesection').css('background-image','url(/wp-content/uploads/2019/09/aigle.jpg)');
});
});

</script>

<style>
#naturesection{
transition: background 0.4s linear;
}

</style>

That's it! Thanks for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *