How to change an image <img> on mouse rollover (hover)

Question

How can I change an image (set using <img> tag, which is not a <div> or <some_selector> background, that can be easily solved by changing background or background-image attribute on :hover in CSS) on mouse rollover (hover) like the favorite tag remove button in stackoverflow homepage, in which the (X) image becomes red on hover ?

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;
}