Elementor Awesome Section Background Image Changes on Column Hover

No extra plug-ins required! Elementor Free compatible!

Asked frequently in the group, how to change the section background image upon hovering a column in Elementor.

Working examples:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Add Your Heading Text Here

Add Your
Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

How to create a background switcher by Elementor Free

The Steps what will we do :

1- Copy our code and past it in your page

2- create A new Section

3- Add class ‘parent’ to the Scetion

4- Set some Styles for the section like the height, width, and the Column position to stretch.

5- Add class ‘f-col’ to the column.

6- Add a spacer element inside the column.

7- Add a class ‘f-bg’ to the  spacer.

7- Choose an image to the  spacer as a background.

8-Add the content which you want and add the ‘f-content’ class to it.

To begin with, create your toggle, accordion, or tabs element in a two column section

It can also be an inner section. 

Important: Add a background image in the other column.

Elementor Accordion, Toggle and Tabs Element Awesome Column Background Image Switcher

Then, give your accordion, toggle or tabs element the appropriate class name

Here are the needed class names for each elements:

Accordion: ‘ accordionswitcher ‘

Toggle: ‘ toggleswitcher ‘

Tabs: ‘ tabswitcher ‘

Elementor Accordion, Toggle and Tabs Element Awesome Column Background Image Switcher

Now, add an HTML element on the same page

It doesn’t really matter where on the page the HTML Element is added…

Elementor Close PopUp on Click for Menu & Same Page Links
left element

Add the right code to the html element, and edit the links to your own background images

Important: the first background image link will be automatically linked with the first accordion, toggle or tabs item, and so on. Add a link for every item.

Code for accordion element:

<script>
‘use strict’;
document.addEventListener(‘DOMContentLoaded’, function () {

//Edit the background images links HERE

var links = [
‘https://element.how/wp-content/uploads/2019/08/phonesticky.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestick.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.jpg’
];


/* Don’t modivy the code below */

var switchers = document.querySelectorAll(‘.accordionswitcher .elementor-tab-title’);
var Column = document.querySelector(‘.accordionswitcher’).closest(‘.elementor-column’);
var rColumn;
function getRColumn(){
if(Column.nextElementSibling){
rColumn = Column.nextElementSibling.firstElementChild;
}
else if(Column.previousElementSibling){
rColumn = Column.previousElementSibling.firstElementChild;
}
};
getRColumn();

// get parent element background styles
var backgroundPosition = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-position’);
var backgroundRepeat = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-repeat’);
var backgroundSize = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-size’);

// add block with background
links.map(function(link, index) {
rColumn.insertAdjacentElement(‘beforeend’, createElement(link));
})

var _loope = function _loope(i) {
switchers[i].addEventListener(‘click’, function () {
resetBackground()
var element = document.querySelectorAll(‘.accordionswitcher-background’)[i];
element.classList.add(‘active’);

});
}
function resetBackground() {
var blocks = document.querySelectorAll(‘.accordionswitcher-background’);
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove(‘active’);
}
}
function createElement(link, className) {
var obj = document.createElement(‘div’);
obj.className = “accordionswitcher-background ” + className || ”;
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = ‘url(‘ + link + ‘)’;
return obj;
}
for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});

</script>


<style>
.accordionswitcher-background, .toggleswitcher-background, .tabswitcher-background{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s linear;
}

.accordionswitcher-background.active, .toggleswitcher-background.active, .tabswitcher-background.active{
opacity: 1;
}
</style>

Code for toggle element:

<script>
‘use strict’;

document.addEventListener(‘DOMContentLoaded’, function () {

//Edit the background images links HERE

var links = [
‘https://element.how/wp-content/uploads/2019/08/phonesticky.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestick.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.jpg’
];


var switchers = document.querySelectorAll(‘.toggleswitcher .elementor-tab-title’);
var Column = document.querySelector(‘.toggleswitcher’).closest(‘.elementor-column’);
var rColumn;
function getRColumn(){
if(Column.nextElementSibling){
rColumn = Column.nextElementSibling.firstElementChild;
}
else if(Column.previousElementSibling){
rColumn = Column.previousElementSibling.firstElementChild;
}
};
getRColumn();

// get parent element background styles
var backgroundPosition = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-position’);
var backgroundRepeat = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-repeat’);
var backgroundSize = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-size’);

// add block with background
links.map(function(link, index) {
rColumn.insertAdjacentElement(‘beforeend’, createElement(link));
})

var _loope = function _loope(i) {
switchers[i].addEventListener(‘click’, function () {
resetBackground()
var element = document.querySelectorAll(‘.toggleswitcher-background’)[i];
element.classList.add(‘active’);

});
}
function resetBackground() {
var blocks = document.querySelectorAll(‘.toggleswitcher-background’);
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove(‘active’);
}
}
function createElement(link, className) {
var obj = document.createElement(‘div’);
obj.className = “toggleswitcher-background ” + className || ”;
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = ‘url(‘ + link + ‘)’;
return obj;
}
for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});

</script>
<style>
.accordionswitcher-background, .toggleswitcher-background, .tabswitcher-background{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s linear;
}

.accordionswitcher-background.active, .toggleswitcher-background.active, .tabswitcher-background.active{
opacity: 1;
}
</style>

Code for tabs element:

Important: for the tab element, you need two sets of the same links to the background images, for this  to also work on mobile… so if you have 3 tabs, you need six links, in this way: link_1_url, link_2_url, link_3_url, link_1_url, link_2_url, link_3_url .

<script>
‘use strict’;

document.addEventListener(‘DOMContentLoaded’, function () {

//Edit the background images links HERE

var links = [
‘https://element.how/wp-content/uploads/2019/08/phonesticky.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestick.png’,
‘https://element.how/wp-content/uploads/2019/08/phonesticky.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestick.png’
];


var switchers = document.querySelectorAll(‘.tabswitcher .elementor-tab-title’);
var Column = document.querySelector(‘.tabswitcher’).closest(‘.elementor-column’);
var rColumn;
function getRColumn(){
if(Column.nextElementSibling){
rColumn = Column.nextElementSibling.firstElementChild;
}
else if(Column.previousElementSibling){
rColumn = Column.previousElementSibling.firstElementChild;
}
};
getRColumn();

// get parent element background styles
var backgroundPosition = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-position’);
var backgroundRepeat = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-repeat’);
var backgroundSize = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-size’);

// add block with background
links.map(function(link, index) {
rColumn.insertAdjacentElement(‘beforeend’, createElement(link));
})

var _loope = function _loope(i) {
switchers[i].addEventListener(‘click’, function () {
resetBackground()
var element = document.querySelectorAll(‘.tabswitcher-background’)[i];
element.classList.add(‘active’);

});
}
function resetBackground() {
var blocks = document.querySelectorAll(‘.tabswitcher-background’);
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove(‘active’);
}
}
function createElement(link, className) {
var obj = document.createElement(‘div’);
obj.className = “tabswitcher-background ” + className || ”;
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = ‘url(‘ + link + ‘)’;
return obj;
}
for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});

</script>
<style>
.accordionswitcher-background, .toggleswitcher-background, .tabswitcher-background{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s linear;
}

.accordionswitcher-background.active, .toggleswitcher-background.active, .tabswitcher-background.active{
opacity: 1;
}
</style>

Finally, enjoy this awesome design!

Et voila! Thanks for reading!
Let me know if you need help!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

Addons Resources
Addons
Resources
Addons
Finder Tool
Addons
Discount Codes
Addons
Review
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Element Or Codes>