/ Published in: CSS
cross-browser solution
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* * 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); }
URL: http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css