<header>  
  <h1>Simple CSS Image Filters</h1>
    <a href="http://webdesignerwall.com/tutorials/9-simple-css-image-filters" target="_blank">View Tutorial</a>
</header>

<main role="main">
 <ul class="grid">
   <li><img class="saturate" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Saturate: <code>filter: saturate(2);</code></li>
   <li><img class="hue" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Hue Rotate: <code>filter: hue-rotate(140deg);</code></li>
   <li><img class="invert" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Invert: <code>filter: invert(.8);</code></li>
      <li><img class="greyscale" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Grayscale: <code>filter: grayscale(1);</code></li>
   <li><img class="sepia" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Sepia: <code>filter: sepia(100%);</code></li>
   <li><img class="blur" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Blur: <code>filter: blur(5px);</code></li>
    <li><img class="darken" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Brightness: <code>filter: brightness(.5);</code></li>
   <li><img class="contrast" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Contrast: <code>filter: contrast(3);</code></li>
     <li><img class="all-the-things" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Combo: <code>filter: contrast(1.4) saturate(1.8) sepia(.6);</code></li>
  </ul>
</main>

/* FILTERS */
.greyscale{
  filter: grayscale(1);
    -webkit-filter: grayscale(1);    
}
.sepia{
  filter: sepia(100%);
    -webkit-filter: sepia(1);
    -ms-filter: sepia(100%);    
}
.blur{
  filter: blur(5px);
   -webkit-filter: blur(5px);
   
}
.saturate{
    filter: saturate(2);
      -webkit-filter: saturate(2);
}
.hue {
    filter: hue-rotate(140deg);
      -webkit-filter: hue-rotate(140deg);
}
.invert {
    filter: invert(.8);
      -webkit-filter: invert(.8);
} 
.darken {
    filter: brightness(.5);
      -webkit-filter: brightness(.5);
}
.contrast {
    filter: contrast(2);
      -webkit-filter: contrast(2);
}

.all-the-things {
    filter: contrast(1.4) saturate(1.8) sepia(.6);
      -webkit-filter: contrast(1.4) saturate(1.8) sepia(.6);
}
button:hover{
   filter: opacity(.7);
      -webkit-filter: opacity(.7);
  text-shadow: -1px -1px 0px #000;
}
/* Remove effect on Hover */
img:hover{
  filter: none;
  -webkit-filter: none;
}

/* Demo Styling */

html{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a7e2cc+0,78d3c5+29,ff5c5c+100 */
background: #a7e2cc; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #a7e2cc 0%, #78d3c5 29%, #ff5c5c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #a7e2cc 0%,#78d3c5 29%,#ff5c5c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #a7e2cc 0%,#78d3c5 29%,#ff5c5c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7e2cc', endColorstr='#ff5c5c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
body{
  font-family: sans-serif;
  text-transform: uppercase;
  color: #FFF;
  margin: 0;
}
img{
  max-width: 100%;
}
a{
	color: #FFF;
	font-family: sans-serif;
	transition: all ease-in-out .3s;
		
}
a:hover{
  color: #0CF;
}

main{
  max-width: 960px;
  margin: 0 auto;
}
.grid{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0 2% 2%;
  text-align: center;
}
.grid li{
  box-sizing: border-box;
  padding: 1rem;
  min-width: 1%;
  max-width: 420px;
}
.grid li img{
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
   transform: translateX(0);
  -webkit-transform: translateX(0);
}
/* General style */
header{
  width: 100%;
  display: block;
  background: #FFF;
  height: 40px;
  margin-bottom: 4%;
  color: #ccc;
  font-family: sans-serif;
  font-weight: bold;
  box-shadow: 0px 2px 0px 0px rgba(125,121,125,0.3);
  overflow: hidden;
}
header h1, header a{
  display: inline-block;
  font-size: .8rem;
  margin: auto 10px;
  line-height: 40px;

}
header h1{
    text-transform: uppercase;
    letter-spacing: 1px;
}
header a{
  text-decoration: none;
  background-color: #eee;
  color: #999;
  padding: 0 20px;
  transition: all ease-in-out .3s;
}
header a:hover{
  background-color: #93dfec;
  color: #eee;
  margin-left: -3px;
}