Edit in JSFiddle

<h1>Fade</h1>
<div id="fade">
    <span></span>
</div>

<h1>Swap</h1>
<div id="swap"></div>

#fade, #fade span { 
    background: #fff url(http://css-plus.com/examples/2012/03/gaussian-blur/i/fence-sprite.png) no-repeat left top; 
    height: 220px; 
    width: 320px; 
    position: relative;
}
#fade span { 
    background-position: 0 -220px; 
    opacity: 0;
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1;
  -webkit-transition: opacity 0.3s ease-out; 
     -moz-transition: opacity 0.3s ease-out; 
      -ms-transition: opacity 0.3s ease-out; 
       -o-transition: opacity 0.3s ease-out; 
          transition: opacity 0.3s ease-out;

}
#fade:hover span { opacity: 1; }

#swap {
    background: url(http://css-plus.com/examples/2012/03/gaussian-blur/i/fence-sprite.png) no-repeat left top; 
    display: block;
    height: 220px; 
    width: 320px; 
}
#swap:hover { background-position: left -221px; }