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.