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

Super Simple Elementor Free Custom CSS

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

Change the links to link your own images.

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(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!

32 Responses

    1. Hey Daniel!

      For this to work in a popup, remove that line of code:

      document.addEventListener('DOMContentLoaded', function() {

      and also remove one instance of

      });

      Just before the tags!

      Place the HTML element, IN the popup.

  1. Is there anyway to change the animation of how the image shows up? right now it looks like it "flips" into focus, I would like it to quickly fade in and out when you hover

    1. Maxime Desrosiers Hi Maxime, thank you for getting back to me. Unfortunately the link you provided did not solve my issue. The code used in the other article seems very specific to the column templates provided.

      For my website I was able to take the Code provided in this article above and adjust it so that the changing of the background image wasnt triggered by hovering columns but rather hovering over an individual slide in the "Slides" widget (all I did was change the class identifier in this bit of code ('.beach'))

      would I be able to put:

      transition: transform 0.44s ease, opacity 0.44s ease;

      transition: opacity 0.44s;

      into the code above anywhere to get a similar effect to the one in the link you provided me with? Im sorry I am very new to Css coding.

    2. Casey Little Hey Casey! Sorry, I don't understand exactly what you are after. You can send me a message by Facebook messsenger, with your page, and an explanation of what you want. I will have a look.

    1. Yes! Change all instances of

      $('#naturesection').css('background-image','url(/wp-content/uploads/2019/09/aigle.jpg)');

      to

      $('#naturesection').css('background-color','#000000');

      and change the ' #000000 ' to the color you want!

  2. I lost you somewhere after naming "naturesection"...
    when you mention in "Add the basic background image" that "the same settings will be used by the other background images." -when and where do we put these images? are those the pictures you add on the hidden section?
    and when do we add the names we gave the text-boxes?
    what I'm trying to to is kinda like you did, but vertically : a menu, that hovering on the item name will show a different, like her: https://www.squarespace.com/templates/hawley-demo

    1. when and where do we put these images? are those the pictures you add on the hidden section?'

      In the code! And also in the hidden section, yes.

      'and when do we add the names we gave the text-boxes?'

      That's also in the code.

      You could get that squarespace template design by following the tutorial here... it should work. Although it would not be coded and constructed in an ideal fashion...

  3. Hi mate, thanks heaps for this tutorial, that's pretty amazing! I only have an issue: the images doesn't seem to preload properly which leads to a bad user experience the first time the user rolls over one column. I added and hidded the section as you recommend but still not fixing the issue, any idea? Thanks,

    1. This might be because you have lazy loading enabled.

      In the tutorial, I say : ' Hide this new section for all viewports. The images will still preload. ' .

      This isn't accurate in cases where lazy oloading is activated. In that case, don't set the images to display:none (By using the responsive setting) . Instead, set them to opacity:0 (using CSS). Then, even with lazy loading on, they will preload (if they would have been in the viewport or close enough to it to preload).

    1. Hey Alejandra! It would be possible, but the code would be completely different... Beyond the scope of the article... The kind of design I frequently code for clients though! Message me if you are interested.

  4. Hello! This worked great for me, thank you! If I wanted to instead change out the text in column, how would I go about that?

    1. Hmm quite different than what I present in the currrent tutorial... The code needed would be something else entirely. Although it's simple enough to code... I might write a tutorial about that at some point!

  5. Hey Maxime. Thanks for your tutorial, is it possible to adapt it and have a background image change on hover of a widget from an other section (button or image) ??

    1. Julien Jean-Baptiste All this is possible, and any related variations of that idea. I could not demonstrate and code them all, so I went with was is shown above. For custom code work, send me a message!

  6. Thanks for that brilliant tutorial!
    I actually changed it to the click event and it works like a charm 🙂

    <script>

    jQuery(document).ready(function($){

    $('#image1').on({
    'click': function(){
    $('#color-change').css({"background-image": 'url(/wp-content/uploads/2021/04/image1.jpg)'});
    }
    });
    $('#image2').on({
    'click': function(){
    $('#color-change').css({"background-image": 'url(/wp-content/uploads/2021/04/image2.jpg)'});
    }
    });
    $('#image3').on({
    'click': function(){
    $('#color-change').css({"background-image": 'url(/wp-content/uploads/2021/04/image3.jpg)'});
    }
    });

    });
    </script>
    <style>
    transition: transform 0.44s ease, opacity 0.44s ease;
    transition: opacity 0.44s;
    </style>

    Cheers,
    Torsten https://vollwebdesign.de

  7. Hi I was wondering how this would work with a single column background image or even an image element.

    Thank you, for this great tutorial.

    1. Hey Stefan!

      For an image element, it's different... quite a bit different. You would be better using the Image Carousel, set to Fade for this...

      For 'single column background image', I'm not certain what you mean here... Isn't that essentially what the demo is showing? Anyhow, steps are the same for a column background image, however in the code you need to replace all instances of '#naturesection' with '#naturesection > div' , if you use it targeting a column background image.

      Cheers!

Leave a Reply