Image Hover-HTML CSS - html

Question

I am having trouble creating a different image to appear when you place your curser over the original image. Heres my code without the rest of my listed buttons:
<nav class="buttons">
<ul>
<li class="left">
<a class="home" href="www.google.com">
<img src="img/Home_2.png"></a></li>
</ul>
</nav>
Css:
.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}
.left{float:left}
.home:hover {background: url(../img/Home_crack.PNG)}
Any suggestions?
EDIT: Okay great suggestions, however when I hover over the "home button" now the stuff in the float tweeks out. Heres the code with the full float properties:
HTML:
<nav class="buttons">
<ul>
<li class="left">
<a class="home" href="www.google.com">
<img src="img/Home_2.png"></a></li>
<li class="left">
<a href="www.google.com" class="menu">
<img src="img/Menu_2.png"></a></li>
<li class="right">
<a href="www.google.com" class="about">
<img src="img/About_2.png"></a></li>
<li class="right">
<a href="www.google.com" class="contact">
<img src="img/Contact_2.png"></a></li>
</ul>
</nav>
CSS:
.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}
.left{float:left}
.home:hover img{display:none}
.home:hover {background: url(../img/Home_crack.PNG);}
.right{float:right}
Basically i wanted to separate 4 buttons.... one in the left float and one in the right float, then on the hover, the buttons would change to a different image....With the new img{display:none} the left float rapidly flashes.

Answer 1

If you want a different img on :hover, you can add it via the :after psuedo element with a background-image.
This approach works well for dynamic img dimensions.
jsFiddle here - different img will be displayed on :hover of a.
a:hover:after {
content: "\A";
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
background: url('http://...');
top: 0px;
left: 0px;
}

Answer 2

You're changing the background of the <a> tag, which happens to be completely filled with the <img>. As such, the background is effectively invisible because the img is completely covering it. Try putting in a
.home:hover img { display: none }
rule as well to hide the img when you are hovered. That'll allow the background to "show".

Answer 3

Try adding the following line, this will hide the orriginal image when hovering the link:
.home:hover img {
display: none;
}
I think the other image is being showed, but the default image won't dissapear and is simply before the hover image.
Now, I do also recommend you to change the display style of the a element to block and give it a fixed size like so because the a element will get a size of 0 when hiding the image element:
.home {
display: block;
width: 100px;
height: 100px;
}
Finally I recommend you to have the default image as a background in the a element too, just to make sure it will appear exactly the same as the hover image. Now you are using an img element to show the default image, a different element to show the hover image. I recommend you to prevent this, and try to use one single element. Simply add this line to achieve this:
.home:hover {
background: url(../img/Home_2.png)
}
Hope this helps!

Answer 4

In addition to everyone else here saying to add this to the css:
.home:hover img { display: none }
You will also need to add a height and width to the a tag that you are putting a background on or the tag will have no content in it and it will not show at all.
.home:hover {
background: url(../img/Home_crack.PNG)
width: [enter the width of the bg image];
height: [enter the height of the bg image];
}