title: fading divs over images failing to stay displayed
body: <p>I have a bunch of images, when I mouse over one of them I want another div to show over each of the others to 'darken' them. It seems to work first image but after that has a mind of its own.</p>
  
  <p>Here's what I've trying:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="hp_imgs"&gt;
      &lt;div class="imggHolder"&gt;
          &lt;img src="http://9ammusic.com/images/hp/adele.jpg"&gt;
          &lt;div class="darkOver"&gt;&lt;/div&gt;
          &lt;div class="showOver"&gt;Adele&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="imggHolder"&gt;
          &lt;img src="http://9ammusic.com/images/hp/michael-buble.jpg"&gt;
          &lt;div class="darkOver"&gt;&lt;/div&gt;
          &lt;div class="showOver"&gt;Michael Buble&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="imggHolder"&gt;
          &lt;img src="http://9ammusic.com/images/hp/neil-diamond.jpg"&gt;
          &lt;div class="darkOver"&gt;&lt;/div&gt;
          &lt;div class="showOver"&gt;Neil Diamond&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#hp_imgs {
  width:66%;
  float:right;
  display:block;
  }
  
  .imggHolder {
  width:31%;
  float:left;
  margin:1%;
  position:relative;
  cursor:pointer;
  }
  
  .showOver {
  width:80%;
  position:absolute;
  bottom:20%;
  left:10%;
  height:30px;
  background:rgba(255, 255, 255, .8);
  padding-top:10px;
  text-align:center;
  display:none;
  border-radius:6px;
  }
  
  .darkOver {
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, .8);
  position:absolute;
  top:0;
  left:0;
  display:none;
  z-index:10;
  }
  
  #hp_imgs img {
  float:right;
  margin:2px;
  border-radius:4px;
  display: block;
  max-width:100%;
  width:auto;
  height:auto;
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$('.imggHolder').mouseenter(function() {
              $(this).find('.showOver').fadeIn();
              $('.darkOver').fadeIn(); // show all darkOver
              $(this).find('.darkOver').hide(); // hide 'this' darkOver
          });
  
          $('.imggHolder').mouseleave(function() {
              $(this).find('.showOver').fadeOut();
              $('.darkOver').fadeOut();
          });
  </code></pre>
  
  <p>Is there a better way to do this?</p>
  
  <p><strong>UPDATE</strong> I think what's happening is that the fadeIn / FadeOut are not finishing</p>
  
  <p>Here's a <a href="http://jsfiddle.net/darrensw/3dWhk/" rel="nofollow">Fiddle</a></p>