如何在鼠标悬停（悬停）时更改图像

如何更改图像（使用设置<img>标签，这不是<div> or <some_selector>背景，可以通过更改轻松解决background or background-image属性上:hover在CSS中）鼠标悬停（悬停）就像stackoverflow主页中最喜欢的标签删除按钮一样，其中(X)悬停时图像变红？

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