Image sprite fading

gistfile1.css

/* http://css-tricks.com/fade-image-within-sprite/ */

/* HTML - <a href="#" class="arrow">Arrow<span></span></a> */

/* CSS */

.arrow {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 36px;
	height: 36px;
	background: url(sprites.png) no-repeat;
}

.arrow span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(sprites.png) no-repeat;
	background-position: -50px 0;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.arrow:hover span {
	opacity: 1;
}