I want to make something like a Slideshow, but if you press a button for the next Picture, it should blur out until it's unrecognizable and then the next should appear blurred and bee sharp.

The 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 object I am trying to blur is an <img>

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.

I want to make something like a Slideshow, but if you press a button for the next Picture, it should blur out until it's unrecognizable and then the next should appear blurred and bee sharp.

The 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 object I am trying to blur is an <img>

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.

• javascript
• html
• blur

Share Improve this question Follow edited Apr 9, 2024 at 11:27 Martin54 1,88222 gold badges1818 silver badges3838 bronze badges asked May 27, 2020 at 9:23 FrozenYoghurtFrozenYoghurt 12711 gold badge11 silver badge77 bronze badges 2

• 2 do you share the javascript code you're trying to implement ? The problem can be solved faster than if you share an example of what you actually want to do as a js fiddle or code snippet. – CanUver Commented May 27, 2020 at 9:30
• 1 It really isn't much more <script> function blur() { document.getElementById("no1").style.filter = "blur(3Px)"; } </script> I'm building the function step by step and that usually works out for me. I also don't use external libraries if you mean that. – FrozenYoghurt Commented May 27, 2020 at 9:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

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

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

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

<img src="https://i.imgur./KjUybBD.png"></img>

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

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)';
}

<img id="blurImg" src="https://i.imgur./2fGfQua.gif">
<button type="button" id="blurBtn">Blur</button>