grayscale() and saturate() filters demo

dabblet.css

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

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

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

img:nth-of-type(2) {
	-webkit-filter: saturate(0%);
}

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

img:nth-of-type(4) {
	-webkit-filter: saturate(50000%);
}

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"}