Elementor Change Section Background Image on Column Hover!

Elementor Change Section Background Image on Column Hover!

Table of Contents

Let's learn how to change the background image of an Elementor section upon hovering any of the columns within!

To begin with, download and import the template you want

Entering $0 gets them to you for free. Or support my work with the amount of your choice!

This will work right away with Elementor Pro. You will still want to watch the video to learn how to make modifications to get your own design.

For Elementor free users, it still works; watch the video to learn how to make this work with Elementor free, and see how to add custom CSS with Elementor free article.

This is the code for the 3 columns version:

@media (min-width: 1025px){
    
.sectionchanger .elementor-column:nth-of-type(1)::after{
        left: 0;
        background-image: url('https://cdn.element.how/wp-content/uploads/2020/06/computer-768696_1280.jpg');
}
.sectionchanger .elementor-column:nth-of-type(2)::after{
        left: calc(100vw/-3);
        background-image: url('https://cdn.element.how/wp-content/uploads/2020/03/9.jpg');
}
.sectionchanger .elementor-column:nth-of-type(3)::after{
        left: calc((100vw/-3) *2);
        background-image: url('https://cdn.element.how/wp-content/uploads/2020/03/4.jpg');
}

    .sectionchanger .elementor-column  .elementor-element{
        z-index: 9;
    }
    .sectionchanger .elementor-column .hovershow{
        opacity: 0;
    }
    .sectionchanger .showbydefault{
        opacity: 1;
    }

    .sectionchanger .showbydefault, .sectionchanger .hovershow{
        transform: translateY(40px);
        transition: transform 0.44s ease, opacity  0.44s ease;
    }
    .sectionchanger .elementor-column:hover .elementor-element{
        opacity: 1;
        transform: translateY(0);
    }
.sectionchanger .elementor-column::before{
        position: absolute;
        content:'';
        height: 100%;
        width: 100%;
        z-index: 7;
        pointer-events: none;
        opacity: 0.59;
        background-color: white;
    }
.sectionchanger .elementor-column::after{
        position: absolute;
        content:'';
        height: 100%;
        width: 100vw;
        top:0;
        background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
        z-index: 4;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.44s;
    }
.sectionchanger .elementor-column:hover::after{
        opacity: 1;
    }
}
.sectionchanger .elementor-column::before{
        position: absolute;
        content:'';
        height: 100%;
        width: 100%;
        opacity: 0.59;
        background-color: white;
    }

 

This is the code for the 4 columns version:

@media (min-width: 1025px){
    
.sectionchangers .elementor-column:nth-of-type(1)::after{
        left: 0;
        background-image: url('https://cdn.element.how/wp-content/uploads/2020/06/computer-768696_1280.jpg');
}
.sectionchangers .elementor-column:nth-of-type(2)::after{
        left: -25vw;
        background-image: url('https://cdn.element.how/wp-content/uploads/2020/03/9.jpg');
}
.sectionchangers .elementor-column:nth-of-type(3)::after{
        left: -50vw;
        background-image: url('https://cdn.element.how/wp-content/uploads/2020/03/4.jpg');
}
.sectionchangers .elementor-column:nth-of-type(4)::after{
        left: -75vw;
        background-image: url('https://cdn.element.how/wp-content/uploads/2020/06/table-5265190_1280.jpg');
}

    .sectionchangers .elementor-column  .elementor-element{
        z-index: 9;
    }
    .sectionchangers .elementor-column .hovershow{
        opacity: 0;
    }
    .sectionchangers .showbydefault{
        opacity: 1;
    }

    .sectionchangers .showbydefault, .sectionchangers .hovershow{
        transform: translateY(40px);
        transition: transform 0.44s ease, opacity  0.44s ease;
    }
    .sectionchangers .elementor-column:hover .elementor-element{
        opacity: 1;
        transform: translateY(0);
    }
.sectionchangers .elementor-column::before{
        position: absolute;
        content:'';
        height: 100%;
        width: 100%;
        z-index: 7;
        pointer-events: none;
        opacity: 0.59;
        background-color: white;
    }
.sectionchangers .elementor-column::after{
        position: absolute;
        content:'';
        height: 100%;
        width: 100vw;
        top:0;
        background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
        z-index: 4;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.44s;
    }
.sectionchangers .elementor-column:hover::after{
        opacity: 1;
    }
}
.sectionchangers .elementor-column::before{
        position: absolute;
        content:'';
        height: 100%;
        width: 100%;
        opacity: 0.59;
        background-color: white;
    }

Then, verify that you have a full width page layout

Click on the gear icon in the lower left part of your screen. Then you will see the different page layouts available for you. They will differ depending on what theme you are using.

With Hello theme, Default works just fine.
Elementor Change Section Background Image on Column Hover! 1

Now, adjust the code to get the design you want

If you want a different styling than what is offered by default. More information about this in the video.

Finally, enjoy your awesome Elementor column hover changing background images design!

Let me know if everything works for you!

premium full screen navigation

fullscreen
View Demos
Comments

14 Responses

  1. Hi Maxime and thanks for the awesome code you provide.
    Am trying to have the hover work with a dynamic post list (text) on which you hover, and the background image would be the hovered post featured image. Any idea if this could work?
    Thanks!
    Julien

  2. Amazing! However, I do not get it to work on Ipad & Mobile version. When clicking on the button, the background image just turn into the overlay color without any image.

  3. Fantastic effect! With Elementor it would be possible to create a similar effect that works when a button is hover.
    I mean, three vertical buttons that on hover make the table background change.

    Anyway, thanks for the great trick. I'm at the very beginning and what you teach seems amazing to me.

    1. Hey Gabriele!

      I'm not following you, would you have an example of those three vertical button design? What is the 'table' background ?

      1. I found the solution with a JavaScript snippet
        If anyone has the same needs as me, they can use this code:
        ---

        { document.body.style.backgroundImage = "url (" + bgImage + ")"; }

        Button Name

        Button Name

        Button Name

        ---
        and many others...

        Thank you very much Maxime!
        You've earned a new loyal fan!

      2. Great work managing all of this by yourself! Nice design indeed on that website...

  4. Thanks for the code, it's 99% what I need with just one small bug. I'm using this with a 3 column layout and the column height is 50% of the screen height.

    I have a default background, let's call it bg0. Column 1 has a background bg1, column 2 has a background bg2, and column 3 has a background bg3. I've changed

    .sectionchanger .elementor-column::after{
    transition: opacity 0.44s;
    }

    to

    .sectionchanger .elementor-column::after{
    transition: opacity 0s;
    }

    So that the transition between column backgrounds is instant. The issue I am having is that when I revert back to the default background bg0 (for example by moving the mouse cursor away from the section containing the 3 columns) there's still a slight transition. How do I eliminate that transition completely?

  5. Good morning,
    I just bought the template for $ 9, uploaded it to my Astra Theme with Elementor Pro and can't see it working. What am I doing wrong?

Leave a Reply