Changing image on hover with CSS/HTML

Question

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm still pretty new to HTML/CSS so I may have missed something simple. Here is the code:

<img src="LibraryTransparent.png" id="Library"> 

#Library {     height: 70px;     width: 120px; }  #Library:hover {     background-image: url('LibraryHoverTrans.png');     height: 70px;     width: 120px; } 

Answer 1

Another option is to use JS:

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" /> 

Answer 2

One solution is to use also the first image as a background image like this:

<div id="Library"></div> 

#Library {    background-image: url('LibraryTransparent.png');    height: 70px;    width: 120px; }  #Library:hover {    background-image: url('LibraryHoverTrans.png'); } 

If your hover image has a different size, you've got to set them like so:

#Library:hover {    background-image: url('LibraryHoverTrans.png');    width: [IMAGE_WIDTH_IN_PIXELS]px;    height: [IMAGE_HEIGHT_IN_PIXELS]px; }