<div id="main">
<div class="img-container">
<img src="https://cdn.pixabay.com/photo/2016/10/18/21/22/crater-lake-1751456_1280.jpg" class="img" id="my-image">
</div>
<div class="btn-container">
<label class="label"> Blur Image</label> <br>
<input type="range" id="blur" class="control" min="0" max="10" value="0">
<span id="blur-content"> </span>
</div>
</div>
#main{
width: 780px;
height: 600px;
background-color:#BB90F2;
display: flex;
justify-content: space-around;
}
.img-container{
width: 550px;
height: 585px;
background-color:#BAAECA;
margin: 10px;
}
.btn-container{
width: 200px;
height: 585px;
background-color: #EEE5F9;
margin: 5px;
}
img.img{
height: 565px;
width: 545px;
margin: 5px;
}
label.label{
color: blue;
font-size: 15px;
font-family:system-ui;
padding: 55px;
}
.control{
margin: 3px;
}
let myImage = document.getElementById('my-image');
let blur= document.getElementById('blur');
let blurContent = document.getElementById('blur-content');
blur.addEventListener('change', changeBlur);
function changeBlur(){
blurContent.textContent = 'Blur ' + blur.value + 'px';
myImage.style.filter = 'blur('+ blur.value + 'px)';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.