CSS3 Filters

A little demo of CSS3 Filters.

by Aniket Pant

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<!-- content to be placed inside <body>…</body> -->
<h1 class="title">CSS3 Filters</h1>
<h2 class="subtitle">Only for webkit</h2>
<ul class="filter-gallery">
<li><img class="grayscale" src="http://lorempixel.com/400/200/abstract/1" /></li>
<li><img class="sepia" src="http://lorempixel.com/400/200/abstract/2" /></li>
<li><img class="blur" src="http://lorempixel.com/400/200/abstract/3" /></li>
<li><img class="saturate" src="http://lorempixel.com/400/200/abstract/4" /></li>
<li><img class="invert" src="http://lorempixel.com/400/200/abstract/5" /></li>
<li><img class="hue-rotate" src="http://lorempixel.com/400/200/abstract/6" /></li>
</ul>

CSS

/**
 * CSS3 Filters
 */
body {
background: #ccc;
}

.title {
font-family: 'Impact', sans-serif;
text-align: center;
font-size: 3em;
text-shadow: 0 -1px 0 #000, 0 1px 0 #fff;
}
.subtitle {
font-family: 'Georgia', serif;
text-align: center;
font-style: italic;
color: #666;
}

.filter-gallery {
list-style: none;
}

.filter-gallery li {
background: #fff;
padding: 5px;
margin: 10px;
display: inline-block;
width: 400px;;
box-shadow: 2px 2px 2px #999;
} 
 
img {
display: block;
transition: all 250ms linear;
}

.grayscale {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
.grayscale:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}

.sepia {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
filter: sepia(100%);
}
.sepia:hover {
-webkit-filter: sepia(0%);
-moz-filter: sepia(0%);
filter: sepia(0%);
}

.blur {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
filter: blur(1px);
}
.blur:hover {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
filter: blur(0px);
}

.saturate {
-webkit-filter: saturate(10);
-moz-filter: saturate(10);
filter: saturate(10);
}
.saturate:hover {
-webkit-filter: saturate(2);
-moz-filter: saturate(2);
filter: saturate(2);
}

.invert {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
filter: invert(100%);
}
.invert:hover {
-webkit-filter: invert(0%);
-moz-filter: invert(0%);
filter: invert(0%);
}

.hue-rotate {
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
.hue-rotate:hover {
-webkit-filter: hue-rotate(90deg);
-moz-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}