Я привел вам простой пример, где вы можете размывать div нажатием кнопки. Я думаю, что это поможет вам.
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio necessitatibus id nam numquam aliquid dolore ipsam eum. Id sed alias placeat expedita! Libero tempore nobis asperiores temporibus adipisci earum quibusdam.
</div>
<button class="toggle"> Toggle Blur </button>
.content {
width: 300px;
border: solid 1px black;
padding: 10px;
}
.blur {
filter: blur(8px);
-webkit-filter: blur(8px);
}
Вы должны добавить Jquery сначала
jQuery(document).ready( function(){
$(".toggle").click(function(){
$(".content").toggleClass("blur");
});
})
См. На Codepen https://codepen.io/biswassuman/pen/BaowLRm
Полный код
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<style>
.content {
width: 300px;
border: solid 1px black;
padding: 10px;
}
.blur {
filter: blur(8px);
-webkit-filter: blur(8px);
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio necessitatibus id nam numquam aliquid dolore ipsam eum. Id sed alias placeat expedita! Libero tempore nobis asperiores temporibus adipisci earum quibusdam.
</div>
<button class="toggle"> Toggle Blur </button>
<script>
jQuery(document).ready( function(){
$(".toggle").click(function(){
$(".content").toggleClass("blur");
});
})
</script>
</body>
</html>