<div class="container -column">
  <div class="holder">
    normal:
    <img src="https://unsplash.it/600/400/">
  </div>
  <div class="holder">
    blur:
    <img src="https://unsplash.it/600/400/" class="-blur">
  </div>
  <div class="holder">
    brightness:
    <img src="https://unsplash.it/600/400/" class="-brightness">
  </div>
  <div class="holder">
    contrast:
    <img src="https://unsplash.it/600/400/" class="-contrast">
  </div>
  <div class="holder">
    hue-rotate:
    <img src="https://unsplash.it/600/400/" class="-hue-rotate">
  </div>
  <div class="holder">
    invert:
    <img src="https://unsplash.it/600/400/" class="-invert">
  </div>
  <div class="holder">
    saturate:
    <img src="https://unsplash.it/600/400/" class="-saturate">
  </div>
  <div class="holder">
    sepia:
    <img src="https://unsplash.it/600/400/" class="-sepia">
  </div>
  <div class="holder">
    multiple filters:
    <img src="https://unsplash.it/600/400/" class="-multiple">
  </div>
</div>

.-blur {
  filter: blur(8px);
}

.-brightness {
  filter: brightness(1.5);
}

.-contrast {
  filter: contrast(250%);
}

.-hue-rotate {
  filter: hue-rotate(60deg);
}

.-invert {
  filter: invert(85%);
}

.-opacity {
  filter: opacity(50%);
}

.-saturate {
  filter: saturate(50%);
}

.-sepia {
  filter: sepia(80%);
}

.-multiple {
  filter: hue-rotate(70deg) saturate(145%) brightness(145%);
}

.holder {
  font-size: 20px;
  line-height: 1.5em;
  margin-bottom: 1em;
  width: 300px;
  img {
    width: 100%;
  }
}

html, body {
  height: auto;
}