Cambiar imagen en hover

[bcjmpr]

Necesito ayuda con un código a mi parecer bastante sencillo, pero no logro hacerlo funcionar. Tengo una imagen como enlace a una página de facebook, la idea es que se muestre de color gris por default, y al pasar el mouse encima cambie a color azul. Tengo ambas imágenes por separado y mi código es como sigue:

Código HTML:

<div id="header">
<a href="facebook.com/vinculo" class="over">
<img class="social" src="css/images/facebook_off.png" alt="facebook" width="84" height="22" />
</a>
</div>
 

Y en CSS tengo lo siguiente:

Código CSS:

a.over:hover
{
width: 84px;
height: 22px;
background-image: url("images/facebook_on.png");
background-repeat: no-repeat;
}
 

Y lo que sucede es que al pasar el mouse sobre el vínculo aparece la imagen azul pero debajo de la gris, es decir, se ve desfasada.

He intentado otras maneras, por ejemplo he quitado la imagen del html y la he agregado a una clase en CSS pero fue peor porque ninguna imagen aparecía. ¿Me pueden ayudar? ¿qué estoy haciendo mal?