title: Mouse over hover not working using jQuery
body: <p>I have a incorporated a jQuery mouse over hover function on my site (<a href="http://www.lybstore.com/index.php" rel="nofollow">click here and scroll down to images with coloured blocks</a>). I have noticed the hover state image is not visible although I have played around with the Z-index. What is causing this issue?</p>
  
  <p>Below is a snippet of my code.</p>
  
  <pre><code>&lt;div class="shirt-block" style="background:#333334;"&gt;
      &lt;figure&gt;
          &lt;img class="shirt col-img-inner" src="img/B0713011sf2.jpg" alt="alt"/&gt;
      &lt;/figure&gt;
  &lt;/div&gt;
  
  .shirt-block {
      width:47%;
      float:left;
      margin:0; padding:0;
      margin-left:2%;
      min-width:200px;
      max-width:600px;
      position:relative;
  }
  
  .shirt-block &gt; figure { margin:0; padding:0; height:100%; position:absolute; top:0; right:0; width:100%; }
  
  
  .shirt-sizer { width:100%; /* same as figure width */ }
  
  .shirt {
      width:100%;
      position:absolute;
      top:0;
      right:0;
  }
  
  .shirt-hover {
      background:url(http://www.lybstore.com/img/home-hover-bg.png);
      background-size:cover;
      position:absolute;
      top:0; right:0;
      z-index:100;
      width:100%;
      height:100%;
      opacity:0;
  }
  
  
  $('figure').append('&lt;div class="shirt-hover"/&gt;');
  
  var $sizer = $("&lt;img/&gt;",  {src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAMAAADXLxypAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACBJREFUeNrtwTEBAAAAwiD7p14Hb2AAAAAAAAAAAABcAiWAAAEKyWyqAAAAAElFTkSuQmCC"}).addClass("shirt-sizer");
  
  $('.shirt-block').append($sizer);
  
  $('.shirt-hover').hover(function(){
      $(this).stop().animate({opacity:1},200);
  },function(){
      $(this).stop().animate({opacity:0},200);
  });
  </code></pre>