<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>

body{
  font-size: 17px;
  text-align: center;
}
p{
  font-weight: 700;
}
.wrap{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.block{
  width: 200px;
  height: 200px;
  background-image:  url('https://image.prntscr.com/image/lCAz0wToTmqr6knkHgsbGw.png');
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.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);
}
$('#select').on('change', function() {
  var filter = $(this).find(":selected").val();
  $('.box').css( 'filter', filter );
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.