krish krish - 23 days ago 7
CSS Question

hide the background image when the hover image appears using css

I am using CSS for hover and it works, but the hover image allow the background image (

pic_normal
) to display like transparent behind the image(
pic_hover
).

How to display only the hover image when mouse over on it?

HTML

<img id="first" src="images/clients/pic_normal.png" />


CSS

#first img:hover {
background-image: url("/images/clients/pic_hover.png");
background-repeat: no-repeat;
}

Answer

Your CSS works just fine as intended - it changes the background of your img element. Think about the pic_normal.png as the content of your element (e.gg. some text). When you changing the background the content doesn't change.

Try this instead - http://jsfiddle.net/WvKye/

<div id="first"></div>

#first {
    background: url("images/clients/pic_normal.png") no-repeat;
    height: 300px;
    width: 300px;
}

#first:hover {
    background: url("images/clients/pic_hover.png") no-repeat;
}‚Äč