title: how can i make a css hover over image Without affecting the image
body: <p>see the image ...
  To understand ;P</p>
  
  <p>this is the code i use</p>
  
  <pre><code>.img1 {
  background-image: url('img1.png');
  width: 381px;
  height: 187px;
  background-repeat: no-repeat;
  float: left;}
  
  .img1:hover {
      background-image: url('imghover.png');
      width: 381px;
      height: 115px;
      background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>but it is affecting the img1
  I want it to appear above the img1 without affecting on it</p>
  
  <p>i fix it sorry </p>
  
  <p>see this is example 
  <a href="https://dl.dropbox.com/u/35904623/css.gif" rel="nofollow">https://dl.dropbox.com/u/35904623/css.gif</a></p>
  
  <p>+
  another one</p>
  
  <p><a href="https://dl.dropbox.com/u/35904623/css2.gif" rel="nofollow">https://dl.dropbox.com/u/35904623/css2.gif</a></p>