title: mozilla Grayscale permanent filter does not work / Cross browser
body: <p>I was wondering, why all the other browsers work with my TUMBLR customize theme, and the Mozilla seems to have its own ways:</p>
  
  <pre><code>#post img {
  width:500px;
  margin-left: -43px;
  opacity:0.75;
  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"); /* Firefox 10+ */     
  filter: gray; /* IE6-9 */
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%); 
  transition: all 0s 99999s;
  -moz-transition: all 0s 99999s; 
  -webkit-transition: all 0s 99999s;
  }
  
  #post img:hover {
  opacity:1;
  filter: none !important;
  /* transition on mouseover */
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out; 
  }
  </code></pre>
  
  <p>Basically intention was to put hover in a permanent state, all pictures get grey then recolor and stay in permanent state. The code includes a delay in transition to the normal state of the image. </p>
  
  <p>Can you please let me know whats the issue?
  Thanks a lot! Peter. </p>