CSS3 Filters

.saturate {-webkit-filter: saturate(3);} .grayscale {-webkit-filter: grayscale(100%);} .contrast {-webkit-filter: contrast(160%);} .brightness {-webkit-filter: brightness(0.25);} .blur {-webkit-filter: blur(3px);} .invert {-webkit-filter: invert(100%);} .sepia {-webkit-filter: sepia(100%);} .huerotate {-webkit-filter: hue-rotate(180deg);} .opacity {-webkit-filter: opacity(50%);}

by peterbenoit

HTML

<!-- Lets make some simple hover effects with CSS3 Filters -->
<div id="gallery">
    <a href="#">
        <!-- Title and classes -->
        <span class="title">Saturate</span>
        <img...

CSS

/*Styles*/
* { margin: 0; padding: 0;}

body {
    font-family: arial, verdana, tahoma;
    background: #fff;
}

#gallery {
    width: 725px;
    margin: 25px auto;
}

#gallery a {
    display: block;
    float: left;
    margin-bottom: 25px;
    position: relative;
    
    -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}

/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
    margin: 0 25px 25px 25px;
}

#gallery a img {
    display: block;
    width:200px;
    height:100px;
    -webkit-transition: all 0.5s;
}

/*Hover effects*/
#gallery a img:hover {
    -webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
    -webkit-filter: brightness(0);
}

/*Title styles*/
.title {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    position: absolute;
    left: 0;
    bottom: 15px;
    z-index: 1;
    padding: 5px 7px;
    background: rgba(0, 0, 0, 0.6);
}

/*Filter styles*/
.saturate {-webkit-filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.opacity {-webkit-filter: opacity(50%);}