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('//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('//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('//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('//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('//cdn.element.how/wp-content/uploads/2020/03/9.jpg');
}
.sectionchangers .elementor-column:nth-of-type(3)::after{
        left: -50vw;
        background-image: url('//cdn.element.how/wp-content/uploads/2020/03/4.jpg');
}
.sectionchangers .elementor-column:nth-of-type(4)::after{
        left: -75vw;
        background-image: url('//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!

Comments

3 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.

Leave a Reply