<div class="box">
<p>Демонтрація роботи значення filter</p>
<label for="select">Задати значення для filter: </label>
<select class="input" id="select">
<option value="original" name="filter" selected>original</option>
<option value="blur" name="filter">blur</option>
<option value="brightness" name="filter">brightness</option>
<option value="contrast" name="filter">contrast</option>
<option value="grayscale" name="filter">grayscale</option>
<option value="huerotate" name="filter">huerotate</option>
<option value="invert" name="filter">invert</option>
<option value="opacity" name="filter">opacity</option>
<option value="saturate" name="filter">saturate</option>
<option value="sepia" name="filter">sepia</option>
<option value="shadow" name="filter">shadow</option>
</select>
</div>
<div class="block"></div>
body{
font-size: 17px;
text-align: center;
}
p{
font-weight: 700;
}
.block{
width: 200px;
height: 200px;
margin: 20px auto;
background-image: url('https://image.prntscr.com/image/lCAz0wToTmqr6knkHgsbGw.png');
}
.blur{
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter: invert(70%);
filter: invert(70%);
}
.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}var filter ='';
var block = $('.block');
$('#select').on('change', function() {
block.removeClass(filter);
filter = $(this).find(":selected").val();
block.addClass( filter );
});
External CSS
This Pen doesn't use any external CSS resources.