Como crear un menu de imagenes

[DiifoOtz]

Hola vengo a pedir ayuda con un problema que no logro solucionar.

Estoy realizando un menu de imagenes un trabajo personal para aprender HTML y CSS.

La funcion del menu es la de mostrar iconos de redes sociales como twitter y facebook y despues de pasar el mouse sobre el cambiar de color y aspecto.

codigo:

Código HTML:

<div id="bookmarks">
            <ul>
            <li><a href="#" class="facebook"><img alt="" title="asdasd" src="images/socialicons/facebook.png" /></a></li>
            <li><a href="#" class="twitter"><img alt="" src="images/socialicons/twitter.png" /></a></li>
            <li><a href="#" class="google"><img alt="" src="images/socialicons/google.png" /></a></li>
            <li><a href="#" class="youtube"><img alt="" src="images/socialicons/youtube.png" /></a></li>
            <li><a href="#" class="rss"><img alt="" src="images/socialicons/rss.png" /></a></li>
            </ul>
        </div>
 

es simple la estructura pero al agregar css usando HOVER y agregando una imagen diferente a cada uno ocurre el error puesto que la imagen se muestra debajo de la imagen original. Intente agregandoles un position y un z-index pero nada.

Además intente haciendolo con jquery pero no logro hacerlo puesto que se poco de este frame. En jquery intente haciendolo asi

Código Javascript:

$(document).ready(function(){
    $('.facebook').mouseover(function(e){
        e.preventDefault();
        $(this).attr('src', 'images/socialicons/facebook-red.png');
    });
});
 

si me puedieran ayudar es algo simple el ejercicio pero no logra con la solucion