Elementor Image hover section visible || creative wordpress elementor image hover effect

Elementor Image hover section visible || creative wordpress elementor image hover effect

Features 

🔸Fully customizable 

🔸Responsive 

🔸Hover Effects

🔸CSS Code

  

Tutorial link:

https://youtu.be/m8y5LW__j0s

☑️Support me on Patreon

https://www.patreon.com/developercrazy

🔸More WordPress Videos playlist 

🔸Unity Videos playlist 

🔸UI Template Downloadlink 

☑️Elementor file download link click here

Code

 <style>
@media (min-width: 769px){
.image-hover{
    position: absolute;
    width: var(width);
    z-index: 1;
    display: none;
    pointer-events: none;
    top: var(top);
    left: var(left);
}
}
@media (max-width: 768px){
.image-hover{
    margin-bottom: 20px !important;
}
.image-hover{
    position: default;
    width: 100%;
    display: block !important;
    opacity: 1 !important;
    pointer-events: default;
    box-shadow: none;
    padding: 0;
    transform: none !important;
}
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var $ = jQuery;
 var min_width = parseInt($( window ).width());
if(min_width > 769){ 
$(document).ready(function(){

$('.img').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)')
})
$('.img').on('mouseenter', function(e){
    console.log("Enter");
    $(this).siblings().fadeIn(300)
})
$('.img').on('mouseout', function(e){
    $(this).siblings().fadeOut(300)
})
})}
</script>