CSS Filters!

dabblet.css

/**
 * CSS Filters!
 */

img{
margin:5px;
}

img:nth-of-type(1){
-webkit-filter:grayscale(1);
-webkit-transition:all 1s ease-in-out;
}

img:nth-of-type(1):hover{
-webkit-filter:grayscale(0);
}


img:nth-of-type(2){
-webkit-filter:sepia(1);
-webkit-transition:all 1s ease-in-out;
}

img:nth-of-type(2):hover{
-webkit-filter:sepia(0);
}


img:nth-of-type(3){
-webkit-filter:saturate(200%);
-webkit-transition:all 1s ease-in-out;
}

img:nth-of-type(3):hover{
-webkit-filter:saturate(100%);
}


img:nth-of-type(4){
-webkit-filter:hue-rotate(180deg);
-webkit-transition:all 1s ease-in-out;
}

img:nth-of-type(4):hover{
-webkit-filter:hue-rotate(0deg);
}


img:nth-of-type(5){
-webkit-filter:invert(100%);
-webkit-transition:all 1s ease-in-out;
}

img:nth-of-type(5):hover{
-webkit-filter:invert(0);
}


img:nth-of-type(6){
-webkit-filter:opacity(30%);
-webkit-transition:all 1s ease-in-out;
}

img:nth-of-type(6):hover{
-webkit-filter:opacity(100%);
}

img:nth-of-type(7){
-webkit-filter:brightness(20%);
-webkit-transition:all 1s ease-in-out;
}

img:nth-of-type(7):hover{
-webkit-filter:brightness(100%);
}

img:nth-of-type(8){
-webkit-filter:contrast(50%);
-webkit-transition:all 1s ease-in-out;
}

img:nth-of-type(8):hover{
-webkit-filter:contrast(100%);
}

img:nth-of-type(9){
-webkit-filter:blur(5px);
-webkit-transition:all 1s ease-in-out;
}

img:nth-of-type(9):hover{
-webkit-filter:blur(0px);
}

img:nth-of-type(10){
-webkit-filter:drop-shadow(5px 10px 10px rgba(0,0,0,.9));
-webkit-transition:all 1s ease-in-out;
}

img:nth-of-type(10):hover{
-webkit-filter:drop-shadow(0px 0px 0px rgba(0,0,0,0));
}

dabblet.html

<h1>CSS Filters</h1>
<h3>Hover for Original Image</h3>

<img src="http://lorempixel.com/300/200/nature/1/">

<img src="http://lorempixel.com/300/200/nature/2/">

<img src="http://lorempixel.com/300/200/nature/3/">

<img src="http://lorempixel.com/300/200/nature/4/">

<img src="http://lorempixel.com/300/200/nature/5/">

<img src="http://lorempixel.com/300/200/nature/6/">

<img src="http://lorempixel.com/300/200/nature/7/">

<img src="http://lorempixel.com/300/200/nature/8/">

<img src="http://lorempixel.com/300/200/sports/">

<img src="http://lorempixel.com/300/200/nature/10/">

settings.json

{"view":"split","prefixfree":"1","page":"html"}