Pure CSS Rollover Image Effect using one Image Sprite

Pure CSS Rollover Effect

This very simple markup allows you to use the classic image rollover effect without the need for any Javascript.
Also, by using one image sprite for each image, or even a group, server requests are minimized, and page load as well as rollover response is optimized.

Have at it!

The Code:

/*——–The css ——–*/

#twitter {
display: inline-block;
width: 100px;
height: 100px;
background: url(‘img-sprite.png’) 0 0;	
}
#twitter:hover {
background-position: 0 -100px;
}
#vimeo {
display: inline-block;
width: 100px;
height: 100px;
background: url(‘img-sprite.png’) 0 -200px;	
}
#vimeo:hover {
background-position: 0 -300px;
}
#fb {
display: inline-block;
width: 100px;
height: 100px;
background: url(‘img-sprite.png’) 0 -400px;	
}
#fb:hover {
background-position: 0 -500px;
}
#rss {
display: inline-block;
width: 100px;
height: 100px;
background: url(‘img-sprite.png’) 0 -600px;	
}
#rss:hover {
background-position: 0 -700px;
}
		
<!-- The html -->

<a id="twitter" title="Wow, Pure CSS Rollover! No Javascript here!" href="http://www.twitter.com" target="blank"></a>

<a id="vimeo" title="I can be whatever text you choose" href="http://www.vimeo.com" target="blank"></a>

<a id="fb" title="This is a classic example of when to use this effect" href="http://www.facebook.com" target="blank"></a>

<a id="rss" title="If you click me, I'll take you to a Website!" href="http://www.google.com" target="blank"></a>