(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Required for Custom CSS.
1 – Elementor Pro
Image Swap on hover without permanently switching images
Replace InsertImageURL with URL of your images.
.mainBg contains the image that is shown at start.
.column1,2,3,4 contains the image url that is shown on hover
/*Default Background Image*/
.mainBg {
background-image: url('InsertImageURL');
background-size: cover;
background-position: center center;
transition: background-image 0.5s;
}
/*Column1 Background Image*/
.mainBg:has(.column1:hover) {
background-image: url('InsertImageURL#1');
}
/*Column2 Background Image*/
.mainBg:has(.column2:hover) {
background-image: url('InsertImageURL#2');
}
/*Column3 Background Image*/
.mainBg:has(.column3:hover) {
background-image: url('InsertImageURL#3');
}
/*Column4 Background Image*/
.mainBg:has(.column4:hover) {
background-image: url('InsertImageURL#4');
}
Swap/Switch Images Permanently on Hover with Elementor
Replace InsertImageURL with URL of your images.
.mainImage contains the image that is shown at start.
.box1,2,3,4 are the CSS classes of each containers
hoverImages contains the image URLs that is shown on hover
<style>
.mainImage {
background-image: url('InsertImageURL');
background-size: cover;
background-position: center center;
transition: background-image 0.5s;
}
</style>
<script>
const mainImage = document.querySelector(".mainImage");
const boxSelectors = [".box1", ".box2", ".box3", ".box4"];
const hoverImages = [
"InsertImageURL1",
"InsertImageURL2",
"InsertImageURL3",
"InsertImageURL4"
];
boxSelectors.forEach((selector, index) => {
const box = document.querySelector(selector);
box.addEventListener("mouseenter", function() {
mainImage.style.backgroundImage = `url('${hoverImages[index]}')`;
});
});
</script>
