title: CSS - Image and hover not working correctly
body: <p>I have an image on a page and when I hover the image should show a different color. The hover itself works but the original image is on top of the hover image. I have tried setting z-index but does not work correctly. </p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>    #login, #logout { 
  float:left;
  padding: 0px 10px; 
  margin-left:5px;
  margin-top:15px;
  z-index:1;
  }
  
  #login:hover{
  background:transparent url('../images/skin/loginhover.png') no-repeat 0px 0px;
  float:left;
  padding: 0px 10px; 
  margin-left:15px;
  margin-top:15px;
  z-index:10;
  }
  #logout:hover{
  background:transparent url('../images/skin/logouthover.png') no-repeat 0px 0px;
  float:left;
  padding: 0px 10px; 
  margin-left:15px;
  margin-top:15px;
  z-index:10;
  }
  </code></pre>
  
  <p>Thanks for any help and advice!</p>