title: How do I desaturate and saturate an image using CSS?
body: <p><strong>Update</strong>  </p>
  
  <p>I just realized that the desaturation is only working in Chrome. How do I make it work in FF, IE and other browsers? (Headline changed)</p>
  
  <hr>
  
  <p>I'm converting a color picture to greyscale by following the suggestions here:  <a href="https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css">Convert an image to grayscale in HTML/CSS</a></p>
  
  <p>And it works great (in Chrome): <a href="http://jsfiddle.net/7mNEC/" rel="noreferrer">http://jsfiddle.net/7mNEC/</a></p>
  
  <pre><code>&lt;img src="https://imagizer.imageshack.us/v2/350x496q90/822/z7ds.jpg" /&gt;
  
  // CSSS
  img {
      filter:         url(~"data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;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\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
      -webkit-filter: grayscale(100%);
      -moz-filter:    grayscale(100%);
      -ms-filter:     grayscale(100%);
      -o-filter:      grayscale(100%);
      filter: gray; 
  }
  
  img:hover {
      filter: none;
      cursor: pointer;
  }
  </code></pre>
  
  <p>But I'm not able to remove the desaturation on e.g. mouse over.  </p>
  
  <p>Any ideas to what I'm doing wrong?</p>