I'm looking for assistance with a website I'm currently developing. I need to have a new image appear when hovering over an existing 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>
So far, this is the HTML code that I have implemented.
#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;
}
Despite my attempts with the CSS styling provided above, I am unable to achieve the desired effect of having the new image display upon hovering over the original image. Any suggestions or guidance on how to resolve this issue would be greatly appreciated! :)