title: Hover image on top of another image
body: <p>I'm trying to add some hover effect on some images I got.</p>
  
  <pre><code>&lt;div id="horizontal_list"&gt;
    &lt;div class="grid_3 first overlay"&gt;
        &lt;a href="#"&gt;
          &lt;img border="0" alt="first" src="path"&gt;
        &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="grid_3 overlay"&gt;
        &lt;a href="#"&gt;
          &lt;img border="0" alt="first" src="path"&gt;
        &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I hover the div with the overlay class I want another image to hover on top of the imagetag..</p>
  
  <p>I've got the following css:</p>
  
  <pre><code>#horizontal_list{
  margin-top: 18px;
  height: 330px;
  }
  
  .grid_3{
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
  }   
  .first{
          margin-left: 0px !important;
      }
  
  .last{
      margin-right: 0px !important;
  }
  
  .overlay{
      height: 330px;
  }
  
  .overlay:hover{
      background: url('path') no-repeat;
  }
  </code></pre>