title: turning the images to grayscale using jQuery with opacity
body: <p>I'm trying to make my images grayscale using CSS, but it doesn't work on Firefox unless you use SVG. But the thing is when you use SVG the other functionality like opacity and transitions will do not work.</p>
  
  <p>I was hoping if i can find similar code using jQuery which supports all the browsers.</p>
  
  <p>Here is my CSS :</p>
  
  <pre><code>#myimage img{
      width: 100%;
      -webkit-filter: grayscale(100%) contrast(60%) opacity(.3);
       -moz-filter: grayscale(100%) contrast(60%) opacity(.3);
        -ms-filter: grayscale(100%) contrast(60%) opacity(.3);
         -o-filter: grayscale(100%) contrast(60%) opacity(.3);
          filter: grayscale(100%) contrast(60%) opacity(.3);
           filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\' filterRes=\'800\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
            filter: gray; /* IE 6-9 */
             filter:alpha(opacity=6);
              -moz-opacity: 0.6;
      o-transition: .7s;
      -ms-transition: .7s;
      -moz-transition: .7s;
      -webkit-transition: .7s;
      transition: .7s;
  
  
  
  
  
  }
  #myimage img:hover{
      width: 100%;
      -webkit-filter: none;
      -moz-filter: none;
      filter: none;
      filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\' filterRes=\'800\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
      opacity: (.5);
      o-transition: .7s;
      -ms-transition: .7s;
      -moz-transition: .7s;
      -webkit-transition: .7s;
      transition: .7s;
  }
  </code></pre>
  
  <p>Has anyone done it before that could help me out with this?</p>