title: Fade up image doesn't get over the fade out image
body: <p>I have 6 images, on hover each image gets replaced by another image which fade up (with jQuery) and gets upon the initial image.</p>
  
  <p>The issue is that when the image fade up, it gets under the original image and not over it.</p>
  
  <p>Since the fade in/out effect works fine, i think this issue belongs to my css code:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#puzz {
      border-color:#000000;
      background-color:#00CC33;
      position:fixed;
      left:20%;
      top:13%;
      width:900px;
      height:650px;
  }
  li {
      list-style:none;
      float:left;
      list-style:none;
      padding:8px;
      margin:10px;
      line-height:10px;
      width:218px;
      height:218px;
      overflow:hidden;
      background:#99CCFF;
      /*For IE9 compatibility*/
      behavior: url(border-radius.htc);
      border-radius: 8px;
  }
  .fade div {
      position:absolute;
      top:auto;
      left:auto;
      display: none;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="puzz"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div class="fade"&gt;&lt;img src="img7.jpg" /&gt;
                  &lt;div&gt;&lt;img src="img8.jpg" /&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="fade"&gt;&lt;img src="img2.jpg" /&gt;
                  &lt;div&gt;&lt;img src="img5.jpg" /&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="fade"&gt;&lt;img src="img3.jpg" /&gt;
                  &lt;div&gt;&lt;img src="img4.jpg" /&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="fade"&gt;&lt;img src="img4.jpg" /&gt;
                  &lt;div&gt;&lt;img src="img3.jpg" /&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="fade"&gt;&lt;img src="img5.jpg" /&gt;
                  &lt;div&gt;&lt;img src="img2.jpg" /&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="fade"&gt;&lt;img src="img6.jpg" /&gt;
                  &lt;div&gt;&lt;img src="img1.jpg" /&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is what i get:</p>
  
  <p><img src="https://i.stack.imgur.com/XZE6q.jpg" alt="enter image description here"></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>here is jQuery script i use:</p>
  
  <pre><code>$(document).ready(function () {
      // find the div.fade elements and hook the hover event
      $('div.fade').hover(function () {
          // on hovering over, find the element we want to fade *up*
          var fade = $('&gt; div', this);    
  
          // if the element is currently being animated (to a fadeOut)...
          if (fade.is(':animated')) {
              // ...take it's current opacity back up to 1
              fade.stop().fadeTo(250, 1);
          } else {
              // fade in quickly
              fade.fadeIn(250);
          }
      }, function () {
          // on hovering out, fade the element out
          var fade = $('&gt; div', this);
          if (fade.is(':animated')) {
              fade.stop().fadeTo(3000, 0);
          } else {
              // fade away slowly
              fade.fadeOut(30);
          }
      });
  });
  </code></pre>