CODEWITHSUNDEEP
htmlcssimage
Alfred
Alfred

Reputation: 21386

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

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 ?

Upvotes: 5

Views: 12829

Answers (1)

mylesagray
mylesagray

Reputation: 8869

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

Upvotes: 8

Related Questions