<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; }