title: Lightweight JQuery slider w/ mask overlay
body: <p>I am trying to implement a lightweight JQuery slider into my site. I want to be able to display pictures like they're sitting within a graphic of a wooden frame, where the wooden frame overlaps slightly onto the edges of the photos.  The slider is working and I have tried my hand at getting my transparent <em>.png</em> image frame mask file to lie on top of my slider div, but I am not having any luck.  Could you please offer some insight?  I think it is a CSS problem.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="mask"&gt;&lt;/div&gt;
      &lt;div id="slider"&gt;
          &lt;div&gt;
              &lt;img src="images/1.jpg" alt="image01"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="images/2.jpg" alt="image02"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="images/3.jpg" alt="image03"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#container {
      position: relative;
      width: 700px;
      height: 325px;
  }
  
  .mask {
      background: url('images/mask.png') no-repeat 0 0;
      width: 700px;
      height: 325px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999999;
  }
  
  #slider {
      position: relative;
      width: 700px;
      height: 325px;
  }
  
  #slider &gt; div {
      position: absolute;
      top: 0;
      left: 0;
  }
  </code></pre>
  
  <p><strong>JQuery:</strong></p>
  
  <pre><code>$(function() {
      $("#slider &gt; div:gt(0)").hide();
  
      setInterval(function() {
          $('#slider &gt; div:first')
              .fadeOut(1000)
              .next()
              .fadeIn(1000)
              .end()
              .appendTo('#slider');
      }, 4000);
  });
  </code></pre>
  
  <p>Thanks for your help!</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/qpL3B/" rel="nofollow">http://jsfiddle.net/qpL3B/</a></p>