<!-- all photos via Unsplash -->
<div id="nofilter">
<img id="nofilter" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
    <h2>no filter</h2>
</div>
<div id="grid">
  <div>
    <img id="saturate" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
    <h4>saturate</h4>
  </div>
   <div>
    <img id="sepia" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
    <h4>sepia</h4>
 </div>
   <div>
      <img id="brightness" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
    <h4>brightness</h4>
   </div>
   <div>
    <img id="blur" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
  <h4>blur</h4>
 </div>
  <div>
    <img id="contrast" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
    <h4>contrast</h4>
  </div>
  <div>
    <img id="huerotate" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
    <h4>hue-rotate</h4>
 </div>
  <div>
    <img id="grayscale" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
    <h4>grayscale</h4>
 </div>
 <div>
    <img id="invert" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
    <h4>invert</h4>
 </div>
   <div>
    <img id="dropshadow" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
    <h4>drop-shadow</h4>
  </div>
 <div>
    <img id="opacity" alt="bianca-suri-spaniel" src="https://images.unsplash.com/photo-1515597849219-88a19d5f13f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" />
    <h4>opacity</h4>
 </div>
</div>

img#saturate {
  filter: saturate(4);
}

img#sepia {
  filter: sepia();
}

img#brightness {
  filter: brightness(125%);
}

img#blur {
  filter: blur(3px);
}

img#contrast {
  filter: contrast(160%);
}

img#huerotate {
  filter: hue-rotate(90deg);
}

img#grayscale {
  filter: grayscale();
}

img#invert {
  filter: invert(.8);
}

img#dropshadow {
  filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.2));
}

img#opacity {
  filter: opacity(.6);
}


/** non filter css **/
body {
  font-family: sans-serif;
  font-size: 20px;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  overflow-x: hidden;
}

h4 {
  font-size: 16px;
}

@media(min-width: 1000px) {
  h4 {
    font-size: 20px;
  }
}

div#nofilter {
  width: 40%;
  margin: 20px auto 5px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

div#nofilter img {
  width: 100%;
}

#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 50px;
  grid-row-gap: 30px;
  width: 80vw;
  margin: 10px auto;
}

#grid div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#grid img {
  width: 100%;
}

#grid p {
  margin-top: 18px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.