title: Get the a sepia effect image and full color when hovering it?
body: <p>I found this css code which show the images in grayscale color and then in full color when hover the image. I need the same but with the <strong>sepia</strong> color instead of grayscale</p>
  
  <pre><code> 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"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ &amp; Safari 6+ */
  }
  
   img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
  }
  </code></pre>
  
  <p>Update: tried with this code but it doesn't work in Firefox. The sepia image is not shown at all:</p>
  
  <pre><code>img.sepia{ -webkit-filter: sepia(1);
  -webkit-filter: sepia(100%); -moz-filter: sepia(100%);
  -ms-filter: sepia(100%); -o-filter: sepia(100%);
  filter: url(sepia.svg#old-timey);
  filter: sepia(100%);
  background-color: #5E2612;
  filter: alpha(opacity = 50);
  zoom:1;
  }
  </code></pre>