Image Hover-HTML CSS
- by LostSchemer
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.
