Advanced Search

Return to Snippet

Revision: 55624
at February 14, 2012 20:06 by a1ias
Updated Code 
/*
 * 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);
}

Revision: 55623
at February 14, 2012 20:02 by a1ias
Updated Code 
/*
 * First create a file filters.svg with the following contents 
<?xml version="1.0" encoding="UTF-8"?>
<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);
}

Revision: 55622
at February 14, 2012 19:55 by a1ias
Initial Code 
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);
}
Initial URL 
http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
Initial Description 
cross-browser solution
Initial Title 
Convert an image to grayscale in HTML/CSS
Initial Tags 
css
Initial Language 
CSS