How to make a new image appear when hovering?

Question

I need some help with a webiste I'm making. I need a new image to appear while hovering over the image.

<div id="buttons">
            <div id="hover-info"><a href="#"><img src="images/Informasjon_button.png" width="120px" height="120px" /></a></div>
            <div><a href="#"><img src="images/Mail_button.png" width="120px" height="120px" /></a> </div>
            <div><a href="#"><img src="images/Facebook_button.png" width="120px" height="120px" /></a></div>
            <div><a href="#"><img src="images/TLF_button.png" width="120px" height="120px" /></a></div>
            <div><a href="#"><img src="images/Portfolio_button.png" width="120px" height="120px" /></a></div>
    </div>

This is the html and what i've tried so far.

    #buttons {
        width:45%;
        height:200px;
        margin-top:100px;
        padding-left:130px;
    }
    #buttons div {
        float:left;
        margin-right:100px;
        height:120px;
    }
    #hover-info {
        height:120px;
        width:120px;
    }
    #hover-info a:hover img {
        background-image:url(../images/Informasjon_button_hover.png) no repeat;
        height:120px;
        width:120px;
    }

And this is what I've tried so far with the css, but I just can't get it right. The new image don't seem to appear when I'm hovering on the image. Would love some help! :)

Answer 1

img tag contains it's own image so assigning new image with css background-image wouldn't appear.

Also, background-image: url(path) no-repeat; is invalid. You can use shortcut with background like this:

#hover-info a{
  background:url(../images/Informasjon_button.png) no repeat;
  height:120px;
  width:120px;
}
#hover-info a:hover{
  background:url(../images/Informasjon_button_hover.png) no repeat;
  height:120px;
  width:120px;
}

And remvoe the html img tag.

Answer 2

Just use the below code:

<a href="#"><img src="path-to-default-img" onmouseover="this.src='path-to-img-on-hover'" onmouseout="this.src='path-to-default-img'"></a>

Make sure you do not mess up the single quotes and double quotes when doing copy paste os changing src .

Hope this helps. :)