{"id":896,"date":"2012-11-19T22:28:56","date_gmt":"2012-11-20T08:28:56","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=896"},"modified":"2012-11-19T22:28:56","modified_gmt":"2012-11-20T08:28:56","slug":"gray-grey-scale-images","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/gray-grey-scale-images\/","title":{"rendered":"Gray \/ Grey Scale images"},"content":{"rendered":"
It is now easier than ever to make an image greyscale in CSS.<\/p>\n
[prettify class=”xml”]<\/p>\n
<svg xmlns=”http:\/\/www.w3.org\/2000\/svg”>
\n<filter id=”grayscale”>
\n<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″\/>
\n<\/filter>
\n<\/svg><\/p>\n
[\/prettify]<\/p>\n
Then use this to make a greyscale:<\/p>\n
[prettify class=”css”]<\/p>\n
img {<\/p>\n
filter: url(filters.svg#grayscale); \/* Firefox 3.5+ *\/<\/p>\n
filter: gray; \/* IE6-9 *\/<\/p>\n
-webkit-filter: grayscale(1); \/* Google Chrome & Safari 6+ *\/<\/p>\n
}<\/p>\n
[\/prettify]<\/p>\n
and then ungreyscale<\/p>\n
[prettify class=”css”]<\/p>\n
img:hover {<\/p>\n
filter: none;<\/p>\n
-webkit-filter: grayscale(0);<\/p>\n
}<\/p>\n
[\/prettify]<\/p>\n
<\/p>\n