Skip to content

Instantly share code, notes, and snippets.

@rezigned
Created June 6, 2012 07:30
Show Gist options
  • Save rezigned/2880430 to your computer and use it in GitHub Desktop.
Save rezigned/2880430 to your computer and use it in GitHub Desktop.
Apply greyscale to an image
/* http://snipplr.com/view/63328/
*
* First create a file filters.svg with the following contents
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" 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>
*/
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE5+ */
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment