Changing image on hover with CSS/HTML

html css image hover
user2704743 picture user2704743 · Sep 15, 2013 · Viewed 603.7k times · Source

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

kurdtpage picture kurdtpage · Jul 14, 2014

Another option is to use JS:

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

Related questions

How to make in CSS an overlay over an image?

I am trying to achieve something like this: When I hover over an image, I would like to put on that image this dark color with some text and the icon. I am stuck here. I found some tutorials but …

Read More
css: avoid image hover first time blinking

I have an anchor that changes its background image when hovered with a class class-btn that contains a background-image. When hovered, it has a.class-btn:hover { background-image('path/to/image-hovered.jpg'); } When the page loads the first time and you …

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More