Let's dive into more visual CSS changes, like blurring. Move the slider below to see code blur this image.

<html> <head> <style> body { text-align: center; } input { margin: 0 0 30px 0; width:250px; } img { width: 250px; filter: blur(5px); } </style> </head> <body> <h4>Blur</h4> <div>- <input type="range" id="saturation-slider" min="0" max="10" step="1" value="5"> +</div> <br> <img id="image" src="https://mimo.app/i/nacho.png" > <script> document.getElementById('saturation-slider').addEventListener('input', function (e) { document.getElementById("image").style.filter = `blur(${this.value}px)`; }); </script> </body> </html>]]>