title: JQuery mouseover image overlay
body: <p>Just wondering how I can get this working 100% correctly. I think I'm nearly there.</p>
  
  <p>Basically, I have an image &amp; when I mouseover, I want an overlay (which is a coloured div) to appear over the top.</p>
  
  <p>I have this semi-working in this <a href="http://jsfiddle.net/AUzKE/7/" rel="noreferrer">fiddle</a>. </p>
  
  <pre><code>&lt;img src="http://mirrorchecker.com/images/rod_160.png" width="160"
  class="company-image"/&gt;
  &lt;div class="company-image-overlay"&gt;&lt;/div&gt;
  
  /* CSS */
  .company-image
  {
  }
  .company-image-overlay
  {
  width: 160px;
  height: 160px;
  background-color: #ffb00f;
  z-index: 1;
  opacity: 0.5;
      position: fixed;
      top: 0.5em;
      display:none;
  }
  
  /* JQUERY */
  $('.company-image').mouseover(function()
       {
          $('.company-image-overlay').show();
       });
  $('.company-image').mouseout(function()
       {
         $('.company-image-overlay').hide();
       });
  </code></pre>
  
  <p>The issue seems to be when the overlay appears, the mouse is no longer technically over the <code>.company-image</code> therefore we get a constant cycling of over / out and the flashing background.</p>
  
  <p>Any ideas?</p>