JSFiddle - React, Tailwind, and code Playground
HTML
<button>
toggle blur
</button>
<div class="mydiv"></div>
CSS
body {
background-color: #000;
}
.mydiv {
width: 300px;
height: 300px;
background: url(https://static01.nyt.com/newsgraphics/2017/12/26/2018-1-olympics-climate/assets/images/469466931-1254.jpg) center no-repeat;
background-size: cover;
transition: filter 1s;
transition-timing-function: steps(20, end);
}
.mydiv.blurred {
filter: blur(20px);
}
JavaScript
$('button').on('click',function(){
$('.mydiv').toggleClass('blurred');
})