<div class="container">
  <p>
    The image on the right has more contrast, has then been brightened, and then supersaturated. 
  </p>
  <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="city" class="original" />
  <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="city" class="filtered" />
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 900px;
}

p {
  padding: 20px;
  background-color: #111;
  color: white;
}

code {
  font-size: 1.2em;
}

.filtered {
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-filter: contrast(150%) brightness(150%) saturate(150%);
}