Skip to content

Instantly share code, notes, and snippets.

@tutweb

tutweb/grayscale-image.html

Created March 3, 2013 15:52
Show Gist options
  • Save tutweb/5076620 to your computer and use it in GitHub Desktop.
Save tutweb/5076620 to your computer and use it in GitHub Desktop.
Download ZIP
Grayscale image with css3 filter
Raw
grayscale-image.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Filter Grayscale</title>
<style>
.grayscale, .normal, img{
width: 300px;
}
.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}
.grayscale:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}
</style>
</head>
<body>
<h2>CSS Filter : <small><a href="http://www.tutorial-webdesign.com/grayscale-css3-filter/">http://www.tutorial-webdesign.com</a></small></h2>
<div class="normal">
<img src="http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg" alt="">
</div>
<div class="grayscale">
<img src="http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg" alt="">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment