Elementor Moving Bubble Overlay Animation with Portfolio Gallery

 

 

CSS code snippet for Moving Overlay Animation:

selector{
    --box-padding: 20px;
}

selector .elementor-widget-image-box .elementor-widget-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
selector .elementor-image-box-wrapper{
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--box-padding);
}
selector .elementor-image-box-content{
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.3s ease-in-out;
}
selector .elementor-widget-image-box:hover .elementor-image-box-content{
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.2s;
}
selector .overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}
selector.anim .overlay{
    transition: all 0.5s ease-in-out, opacity 0.3s ease-in-out;
}
selector:hover .overlay{
    opacity: 1;
}
selector .overlay span{
    position: absolute;
    height: 100%;
    width: calc(100% + 2px);
    margin-left: -1px;
    transition: all 0.1s ease-in-out;
}
selector .overlay.small span{
    transform: scale(0.7);
    opacity: 0.9;
    border-radius: 100%;
}

 

JavaScript code snippet for Moving Overlay Animation:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery

$(document).ready(function(){
    
$('.moving-overlay .elementor-widget-wrap').prepend('<span class="overlay"><span></span></span>')

var imageBox = $('.moving-overlay .elementor-widget-image-box').eq(0)

function overlaySize(){
    $('.moving-overlay .overlay').css(
    {'height': imageBox.height(),
    
    'width': imageBox.width(),
    })
}
overlaySize()
$(window).on('resize', overlaySize)

var prevOffset = {}
    
$('.moving-overlay .elementor-widget-image-box').on('mousemove', function(){
    
    var $this = $(this),
    parent = $this.parent(),
    childPos = $this.offset(),
    parentPos = parent.offset(),
    offset = {
        top: childPos.top - parentPos.top,
        left: childPos.left - parentPos.left
    },
    color = $(this).find('.elementor-widget-container').css('background-color')
    
    $('.moving-overlay .overlay').css({
        'transform': 'translate('+offset.left+'px,'+offset.top+'px)'
    })
    $('.moving-overlay .overlay span').css({
        'background-color': color
    }
        )
    
    if(!$.isEmptyObject(prevOffset) && ( offset.top != prevOffset.top || offset.left != prevOffset.left ) ){
        $('.overlay').addClass('small')
        setTimeout(function(){
            $('.overlay').removeClass('small')    
        },300)
    }
    
    prevOffset.top = offset.top
    prevOffset.left = offset.left
})

var mouseover = false

$('.moving-overlay').on('mouseenter mousemove', function(){
    var $this = $(this)
    mouseover = true
    setTimeout(function(){
        $this.addClass('anim')
    },10)
})


$('.moving-overlay').on('mouseleave', function(){
    var $this = $(this)
    mouseover = false
    setTimeout(function(){
        if(mouseover) return
        $this.removeClass('anim')
        prevOffset = {}
    },500)
})

})

</script>