title: transition into sepia in css
body: <p>i have these pieces of separate css code:</p>
  
  <pre><code>#social img:hover {
  opacity:1; filter:alpha(opacity=100);
  -webkit-filter: grayscale(100%) sepia(100%);
     -moz-filter: grayscale(100%) sepia(100%);
       -o-filter: grayscale(100%) sepia(100%);
      -ms-filter: grayscale(100%) sepia(100%);
          filter: grayscale(100%) sepia(100%); 
  }
  </code></pre>
  
  <p>and this one:</p>
  
  <pre><code>#social{color: #000; transition: color 1s ease;}
  </code></pre>
  
  <p>I want to make the first one similar to the second one so it actually make a <strong>smooth transition from the original image</strong> (#social) <strong>into sepia tone</strong>. How can I (sort of) merge these two pieces of code together? is it even possible in css without js? </p>
  
  <p>example here:<a href="http://jsfiddle.net/tucado/vZ2qA/1/" rel="nofollow">Example</a></p>