Efecto Desenfoque al Pasar el Cursor Elementor

En este tutorial, te voy a enseñar a como lograr un efecto de desenfoque al pasar el mouse por las tarjetas. Lo mejor de todo, es que no necesitas tener la versión Pro de Elementor para lograrlo.

¿Querés obtener esta plantilla LISTA para usar sin ver el tutorial?

Código:

<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>

Deja un comentario Cancelar respuesta