Elementor Change Section Background Image on Column Hover! FREE Templates!

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

See the Elementor background hover demos, and download the templates.

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://elementorcodes.b-cdn.net/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://elementorcodes.b-cdn.net/wp-content/uploads/2020/03/9.jpg');
}
.sectionchanger .elementor-column:nth-of-type(3)::after{
        left: calc((100vw/-3) *2);
        background-image: url('https://elementorcodes.b-cdn.net/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://elementorcodes.b-cdn.net/wp-content/uploads/2020/06/computer-768696_1280.jpg');
}
.sectionchangers .elementor-column:nth-of-type(2)::after{
        left: -25vw;
        background-image: url('https://elementorcodes.b-cdn.net/wp-content/uploads/2020/03/9.jpg');
}
.sectionchangers .elementor-column:nth-of-type(3)::after{
        left: -50vw;
        background-image: url('https://elementorcodes.b-cdn.net/wp-content/uploads/2020/03/4.jpg');
}
.sectionchangers .elementor-column:nth-of-type(4)::after{
        left: -75vw;
        background-image: url('https://elementorcodes.b-cdn.net/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! FREE Templates! 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!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments