CSS3 background sprite slide hover animation using transitions

CSS3 background sprite slide hover animation using transitions

by lovromar

HTML

<a href="#" class="social twitter"><span>share in twitter</span></a> <a href="#" class="social facebook"><span>share in twitter</span></a> <a href="#" class="social lastfm"><span>share in twitter</span></a>

CSS

a.social {
	text-indent: -9999em
}
a.social {
	float:left;
	display:block;
	margin:0 4px 0;
	width: 26px;
	height: 26px;
	display: block;
	background: url("http://chufol.com/wp-content/uploads/2013/03/social_icons_sprite.png");
-moz-transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out;
}
a.twitter {
	background-position:0 0;
}
a:hover.twitter{background-position:0 -31px;}

a.facebook {
	background-position:-80px 0;
}
a:hover.facebook{background-position:-80px -31px;}

a.lastfm {
	background-position:-200px 0;
}
a:hover.lastfm{background-position:-200px -31px;}