title: CSS3 background image position transition
body: <p>I want a CSS3 hover effect on my website's logo.  Easy, right?  Well it works, but not the way I want it to.</p>
  
  <p><a href="http://scferg.com/wp-content/themes/austere/images/logo.png" rel="noreferrer">Link to my logo</a> </p>
  
  <p>The top half of it is the regular state and the bottom half is the :hover state.</p>
  
  <p>I have the standard CSS for changing the background position on :hover, but the CSS3 transition slides the image up and down with the position.  Instead, I want it to simply fade in and out to the new position.</p>
  
  <p>Is this possible when working with one image and two positions or will I have to make two separate images (which isn't happening)?</p>