Fade out/in animation?
<p>I've a logo which is a two image sprite. When you hover over it, the background position simple shifts to the bottom showing the new image.</p>

<p>I want to add a bit of a fade transition to it if possible, can anyone tell me the best way for this.</p>

<p>If it helps this is my CSS: </p>

<pre><code>#header h1#logo a {
    background: url(../images/logo.jpg);
    background-position: 0 0;
    width: 74px;
    height: 74px;
    display: block;
    text-indent: -30000px;
}

#header h1#logo a:hover { background-position: 0 -85px;} 
</code></pre>

<p>Thanks</p>
