Advanced Search

Convert an image to grayscale in HTML/CSS

/ Published in: CSS
Save to your folder(s)
cross-browser solution

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2.  * First create a file filters.svg with the following contents 
  3. <?xml version="1.0" encoding="UTF-8"?>
  4. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  5.    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  6. <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  7.   <filter id="grayscale">
  8.     <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"/>
  9.   </filter>
  10. </svg>
  11. */
  12.  
  13. img {
  14.     filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
  15.     filter: gray; /* IE5+ */
  16.     -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
  17. }
  18.  
  19. img:hover {
  20.     filter: none;
  21.     -webkit-filter: grayscale(0);
  22. }

URL: http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.