Can you Make this Blur Card Hover Effects with Zoom Animation in Elementor?

 

 

CSS code snippet for Buttons:

selector,
selector .elementor-widget-container,
selector .elementor-button-wrapper,
selector a{
    width: 100%;
    height: 100%;
    display: flex;
}
.elementor-editor-active selector{
    z-index: -1;
}

 

Code snippet for Blur Hover Effects:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
     
var $ = jQuery
$(document).ready(function(){
    

$('.card-focus').hover(function(){
    $('.card-focus').addClass('blur')
    $(this).removeClass('blur')
}, function(){
    $('.card-focus').removeClass('blur')
})
})
</script>

<style>
.card-focus{
    transition: all 0.3s ease-in-out;
}
.card-focus.blur{
    filter: blur(13px) grayscale(0.6);
    transform: scale(0.95);
}
.card-focus:hover{
    transform: scale(1.05);
}
.card-focus .e-container,
.card-focus .e-con{
    box-shadow: 0 10px 60px rgb(0 0 0 / 25%);
}
.card-focus .elementor-widget{
    transition: all 0.3s ease-in-out;
}
.card-focus.blur .elementor-widget{
    opacity: 0;
}
</style>