SOURCE

<div class="gallery">
    <img src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="https://scpic.chinaz.net/files/pic/pic9/201909/zzpic19932.jpg" alt="Pineapple" width="300" height="300">

</div>

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    animation: ablur 8s linear infinite;  
}

.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);
    animation: ahuerotate 8s linear infinite;  
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.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);
}
.gallery{
    display: flex;
    flex-wrap: wrap;
}
.gallery img{
    width: 32%;
  
}
@keyframes ahuerotate {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
}
@keyframes ablur {
  0%,
  100% {
  filter: blur(0px);
  }
  50% {
    filter: blur(10px);
  }
}