Cómo cambiar una imagen <img> en pasar el ratón (flotar)

Question

¿Cómo puedo cambiar una imagen (SET usando <img> etiqueta, que no es un <div> o <some_selector> fondo, que puede ser resuelto fácilmente cambiando background o background-image atributo en :hover en CSS) en rollover del mouse (hover) como el botón eliminar etiqueta favorita en la página principal de stackoverflow, en la cual la imagen (X) se pone roja al pasar el mouse sobre ella?

Answer 1

HTML

<div id="css-image-swap-1"> 
<img id="swap-1" src="default-image-url" alt="CSS image swap" /> 
</div> 

CSS

#css-image-swap-1{ 
    width:300px; height:150px; background:url(swap-image-url); 
} 
#css-image-swap-1 img:hover{ 
    opacity:0; 
}