Hide background image when hover image appears using css

Question

I use CSS to hover and it works, but the hover image allows the background image ( pic_normal ) to appear as transparent behind the image ( pic_hover ).

How to display only the hover image when you hover over 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 1

Your CSS works the best it can - it changes the background of your img element. Think of pic_normal.png as the content of your element (for example, some text). When the background changes, the content does not change.

Try this instead of 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; }​ 

Answer 2

Use this:

 <img onMouseOver="this.src='images/clients/pic_normal.png'" onMouseOut="this.src='images/clients/pic_normal.png'" src="images/clients/pic_normal.png"/> 

Answer 3

I think you need javascript for this. Using jquery u can do it like

 $("#first").hover(function() { $(this).attr("src","/images/clients/pic_hover.png"); },function() { $(this).attr("src","/images/clients/pic_normal.png"); } );