Blur an image with JavaScript

Question

I want to make something like a Slideshow, but if you press a button for the next Picture, it should blur out until its unrecognizeable and then the next should appear blurred and become sharp. Problem here is, i would have to apply the blur via JS and my current approach looks like this: document.getElementById("no1").style.filter = "blur(3Px)";

If i apply the blur with css it works just fine, but i need it to apply when the button is clicked, which does not work. The obejct i am trying to blur is an

Also, it would be good to know, if there is something like a waiting condition or if additional steps in the function will wait for the transition duration of the blur to be done before starting.

user_128511 · Answer

const img = document.querySelector('img');
img.addEventListener('click', toggleBlur);

function toggleBlur() {
  this.classList.toggle('blur');
}

img { transition: filter 1s linear; }
.blur { filter: blur(30px); }

Works for me in Chrome, Firefox, Safari, latest Edge...

user_6022243 · Answer

Although gman's solution is a more solid one (toggling a CSS class via JS), this simple approach with applying the filter via JavaScript also works:

var btn = document.getElementById('blurBtn');
var img = document.getElementById('blurImg');

btn.addEventListener('click', addBlur)

function addBlur() {
  img.style.filter = 'blur(3px)';
}

Blur an image with JavaScript

2 Answers