Tutorial

Elementor Change Background On Hover V2

Uses Plugins

Elementor Free
Elementor PRO

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.

1

Outer Container

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

Inner containers (columns)

  1. Add a container inside the first one (Outer Container)
  2. Style it how you like
  3. Add some content
  4. 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"
  5. Duplicate this container
  6. Change the "data-bg-src"  to a new image
  7. Repeat 5 & 6
3

JavaScript

  1. Add an HTML Widget to the editor, must be below the above containers
  2. 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>