Elementor Image Hover MOVING Effects w/ Masonry Gallery in WordPress

 

 

CSS code snippet for Elementor Image Hover Effects:

selector{
    --width: 350px;
    --top: 20px;
    --left: 20px;
}
selector .image-hover + .elementor-inner-section{
    position: absolute;
    width: var(--width);
    z-index: 1;
    display: none;
    pointer-events: none;
    top: var(--top);
    left: var(--left);
}

@media (max-width: 767px){
selector .image-hover{
    margin-bottom: 20px !important;
}
selector .image-hover + .elementor-inner-section{
    position: static;
    width: 100%;
    display: block !important;
    opacity: 1 !important;
    pointer-events: default;
    box-shadow: none;
    padding: 0;
    transform: none !important;
}
}

 

JavaScript Code snippet for Elementor Image Hover Effects:

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

var $ = jQuery

$(document).ready(function(){
    
$('.image-hover').on('mousemove', function(e){
    var left = e.pageX - $(this).offset().left,
        top = e.pageY - $(this).parent().offset().top
        
    $(this).siblings().css('transform', 'translate(' + left + 'px,' + top + 'px)')
})

$('.image-hover').on('mouseenter', function(e){
    $(this).siblings().fadeIn(300)
})

$('.image-hover').on('mouseout', function(e){
    $(this).siblings().fadeOut(300)
})
})

</script>

 

CSS Code snippet for Last Image’s Inner Section:

selector{
    --left: -300px;
}