I want to make a gradual blur transition in an html image using JS. I'm using an initial style , then updating the style property using document object and a global variable.
But the following code doesn't update anything:
var val = 8
function adjust_blur() {
document.getElementById("image").style.filter = blur(String(val) + "px")
val -= 1;
}
function update_blur() {
window.setTimeout(adjust_blur, 1000)
}
#image {
filter: blur(1px);
max-width: 600px;
}
<img src='https://image.freepik.com/free-vector/modern-yellow-bitcoin-design_1017-9631.jpg' id='image'>