Problema con rollover y sprites

[Mariano_Floyd]

Tienes razón, antes que nada esta es la imagen que estoy usando:
Y asi es como me queda:
El resultado hasta ahí es el deseado, ahora, quiero que al pasar el ratón por cada icono cambie al icono naranja. Hasta ahí se como hacerlo con background-position. Mi problema radica en como aplicar el :hover para tal fin.

Este es mi código actual:

Código HTML:

<div class="right">
                <h2>Redes Sociales</h2>
                <ul class="social">
                    <li id="facebook" ><a href="#" ><img src="images/pixel.gif"/></a></li>
                    <li id="linkedin" ><a href="#" ><img src="images/pixel.gif"/></a></li>
                    <li id="twitter" ><a href="#" ><img src="images/pixel.gif"/></a></li>
                </ul>
               
            </div>
 

Código CSS:

.right .social{
    list-style:none;
    text-align:center;
    padding:10px;
}
 
#facebook img, #linkedin img, #twitter img{
     background: transparent url('../images/social_icons.png') no-repeat;
     height:70px;
     width:70px;
     vertical-align:middle;
}
#facebook img {
 
background-position:0 0;
 
    
}
#linkedin img{
 
background-position:-70px 0;
 
 
}
 
#twitter img {
 
background-position:-140px 0;
 
 
}
 
 
.social li {
 
 
    display:inline;
 
}
 

Gracias por responder.