Esto es:
Se hace la imagen duplicada en color y blanco y negro, y luego se cambia la posición del fondo.
Cuando hay un enlace, pongo que se vea de fondo la parte de arriba:
background: url(img/color_BN.jpg) no-repeat center
top;
y cuando pasa el ratón (a:hover), que se ponga de fondo la parte de abajo:
background: url(img/color_BN.jpg) no-repeat center
bottom;
Así de simple. Para mi que es un bonito truco, que se puede aplicar a cualqueir cosa, y tiene de bueno que carga una sola imagen, así no debe haber pérdida al pasar el ratón.
Mikel.