Combined filters demo

dabblet.css

/**
 * Combined filters demo
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

img {
	transition: .5s -webkit-filter;
}

img:first-of-type {
	-webkit-filter: contrast(2000%) grayscale();
}

img:nth-of-type(2) {
	-webkit-filter: grayscale() contrast(2000%);
}

img:nth-of-type(3) {
	-webkit-filter: sepia() hue-rotate(60deg);	
}

img:nth-of-type(4) {
	-webkit-filter: sepia() saturate(200%) hue-rotate(160deg);
}

img:hover {
	-webkit-filter: none;
}

dabblet.html

<h1>Hover over the kittens to see how the original image looked like</h1>
<img src="http://placekitten.com/250/220" />
<img src="http://placekitten.com/250/220" />
<img src="http://placekitten.com/250/220" />
<img src="http://placekitten.com/250/220" />

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}