<div class="container -column">
  <div class="holder min">
    normal:
    <img src="https://s3.envato.com/files/193652246/Seattle.jpg">
  </div>
  <div class="holder min">
    blur:
    <img src="https://s3.envato.com/files/193652246/Seattle.jpg"  class="-blur min">
  </div>
  <div class="holder min">
    brightness:
    <img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-brightness">
  </div>
  <div class="holder min">
    contrast:
    <img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-contrast">
  </div>
  <div class="holder min">
    hue-rotate:
    <img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-hue-rotate">
  </div>
  <div class="holder min">
    invert:
    <img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-invert">
  </div>
  <div class="holder min">
    saturate:
    <img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-saturate">
  </div>
  <div class="holder min">
    sepia:
    <img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-sepia">
  </div>
  <div class="holder min">
    multiple filters:
    <img src="https://s3.envato.com/files/193652246/Seattle.jpg" 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: 40px;
  line-height: 1.5em;
  margin-bottom: 1em;
  width: 300px;
  img {
    width: 100%;
  }
}

html, body {
  height: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.