CSS Filters

To use with -webkit-

by toubia95

HTML

<div id="test">
    <img src="http://www.geologia.fr/fileadmin/templates/tmpl-geologia2012/img/pics/sphere.png">
    <h1>Titre</h1>
    <p>Texte de présentation</p>
</div>

CSS

/* http://www.html5rocks.com/en/tutorials/filters/understanding-css/ */

body {
    padding: 20px;
}

#test h1 {
    font-size: 30px;
    font-weight: bold;
    color: #654654;
}

#test p {
    font-size: 16px;
    color: #789789;
}

#test:hover {
    /*
    -webkit-filter: grayscale(100%);
    -webkit-filter: sepia(100%);
    -webkit-filter: saturate(10);
    -webkit-filter: hue-rotate(90deg);
    -webkit-filter: invert(100%);
    -webkit-filter: opacity(50%);
    -webkit-filter: brightness(140%);
    -webkit-filter: contrast(200%);
    -webkit-filter: blur(10px);
    -webkit-filter: drop-shadow(16px 16px 20px black); 
    */
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}