title: Overlapping a div with an image using z-index
body: <p>A CSS animation is continuously playing behind an image. When the image is not loaded it will display, but when loaded the image will overlap the animation. I'm using z-index to achieve this, but it's not working. </p>
  
  <p>The image should hide loading animation with the z-index property.</p>
  
  <p><strong>Note:</strong> I can't use any javascript solution to hide the loading animation and show it after image load.</p>
  
  <p>CSS / HTML / Demo</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.leftprev {
      overflow:auto;
      position:absolute;
      height:99%;
      width:85%;
  }
  .loadingslide {
      z-index: 50; /* Loading div's z-index */    
  }
  .spinner.big {
      display: block;
      height: 40px;
  }
  .spinner {
      bottom: 0;
      display: none;
      font-size: 10px;
      height: 30px;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
      width: 60px;
  }
  .spinner.big &gt; div {
      width: 6px;
  }
  .spinner &gt; div {
      animation: 1.2s ease-in-out 0s normal none infinite stretchdelay;
      background-color: #333;
      display: inline-block;
      height: 100%;
      width: 6px;
  }
  a {
      color: #470a09;
      text-decoration: none;
  }
  .slideshow .slidebro .leftprev #slideshowpic {
      display: block;
      margin: 0 auto;
      width: auto;
      z-index: 100; /* image's z-index */    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="leftprev"&gt;
      &lt;div class="loadingslide"&gt; &lt;!-- Loading Animation div (should be running in background of the image) --&gt;
          &lt;div id="tracking" class="spinner big"&gt;
              &lt;div class="rect1"&gt;&lt;/div&gt;
              &lt;div class="rect2"&gt;&lt;/div&gt;
              &lt;div class="rect3"&gt;&lt;/div&gt;
              &lt;div class="rect4"&gt;&lt;/div&gt;
              &lt;div class="rect5"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;a id="targetslide" target="_blank" title="Click to view fit to screen" href=""&gt;
            &lt;img src="http://www.placehold.it/500" alt="" id="slideshowpic" /&gt;  &lt;!-- The image (should mask the loading animation div) --&gt;
          &lt;/a&gt;
  &lt;/div&gt;    </code></pre>
  </div>
  </div>
  </p>