Skip to content

@LeaVerou /dabblet.css
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Combined filters demo
/**
* 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;
}
<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" />
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.