Tutorial

Elementor Change Background On Hover V2

Video

Description

This is a follow-up to the previous tutorial. In the previous version, the background image changes immediately on hover of a trigger.

This version transitions the change with a Zoom and Opacity effect.

The background code is a bit more complex. However, the structure of the Elementor containers and Widgets is identical.

Outer Container

Add a container to the editor
Set the Direction to Row
Set the class to "container-hover-bg-change-v2"
Set the initial Background Image. Set it to "center center", "cover"
Set the Background overlay

Inner containers (columns)

Add a container inside the first one (Outer Container)
Style it how you like
Add some content
In Advanced -> Attributes , add an attribute "data-bg-src" with a relative path to an image. e.g. "data-bg-src|/wp-content/uploads/2022/08/20180324-161106.webp"
Duplicate this container
Change the "data-bg-src" to a new image
Repeat 5 & 6

JavaScript

Add an HTML Widget to the editor, must be below the above containers
Copy and paste the JavaScript below into this Widget

Code (click to copy)

JavaScript for HTML Widget (javascript)

<script>
    ;((d)=>{
        const bgContainerSelector = '.container-hover-bg-change-v2';
        const bgHoverContainers = d.querySelectorAll(bgContainerSelector);
        
        bgHoverContainers.forEach( outerContainer =>{
            let lastImage;
            const triggerContainers = outerContainer.children;
            
            const topImage = d.createElement('div');
            topImage.classList.add('bgHoverTopImage');
            
            const overlayDiv = d.createElement('div');
            overlayDiv.classList.add('bgHoverOverlay');
            
            Array.from(triggerContainers).forEach( innerContainer => {
                
               const changeImage = ()=>{
                   lastImage = innerContainer.dataset.bgSrc;
                   topImage.classList.remove('show');
                   topImage.style.backgroundImage = 'url(' + lastImage + ')';
                   setTimeout(()=>{
                       topImage.classList.add('show');
                   }, 50);
               }
               
               innerContainer.addEventListener('mouseenter', changeImage);
               innerContainer.addEventListener('touchstart', changeImage);
               
               
            });
            
            outerContainer.prepend(overlayDiv);
            outerContainer.prepend(topImage);
            
            topImage.addEventListener('transitionend', (e)=>{
                const {propertyName} = e;
                if(propertyName === 'opacity'){
                    outerContainer.style.backgroundImage = 'url(' + lastImage + ')';
                }
            })
        })
        
    })(document);
</script>

<style>
.container-hover-bg-change-v2{
    overflow: hidden;
}
.bgHoverOverlay, .bgHoverTopImage{
    background-color: #00000070;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bgHoverTopImage {
    background-position: center center;
    background-size: cover;
    opacity:0;
    transform: scale(1.2);
}

.bgHoverTopImage.show{
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s, transform 1s;
}
</style>