CSS Sprite Örneği
<ul class="sprite">
<li class="basketbol"></li>
<li class="nota"></li>
</ul>
html,body{text-align:center; font-family:Georgia, 'Times New Roman'; line-height:40px;}

.sprite{width:180px; margin:0 auto; }

.sprite li{
margin:20px;
list-style:none; 
width:30px; 
height:30px; 
background-image:url(http://www.adobewordpress.com/wp-content/uploads/2013/07/css-sprite-icons.png); 
float:left; 
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition:background 0.5s;
} 

.basketbol{background-position:0 0; }
.nota{background-position:30px 0;}

.basketbol:hover{background-position:0 30px;} 
.nota:hover{background-position:30px 30px;}
/*
CSS Sprite için JavaScript yazmaya gerek yok.
You don't need JS for designing Sprites.

www.adobewordpress.com
------------------------------------------
Photoshop dersleri, WordPress, SEO, 
HTML5 ve CSS3 gibi güncel konuları ele alan 
Türkçe interaktif eğitim merkezi.
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.