title: How to make an image appear over another with jQuery
body: <p>So after attending a local coding club meeting for the first time I became inspired to look into jQuery again and try and replicate something one of the speakers talked about. I have got the general idea of the problem done ok, it's just that I can't seem to make the image (that is being hovered over by the cursor) appear over the image that isn't been hovered over. I thought that adjusting the z-index would help negate this but nothing appears to be working.</p>
  
  <p>I have uploaded the files etc to <a href="http://www.downloadthatmovie.com/jquery/" rel="nofollow">http://www.downloadthatmovie.com/jquery/</a>, and here is the source code for the page:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;jQuery Animation 3&lt;/title&gt;
  &lt;style type="text/css"&gt;
      .imgOpa
      {
          height:200px;
          width:200px;
          opacity:0.5;
          filter:alpha(opacity=50);
          z-index:0;
      }
      article{
          padding:20px;
      }
  
      img{
          z-index:0;
      }
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="jquery-1.6.4.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;article&gt;
    &lt;p&gt;
      &lt;img class="imgOpa" src="img/image1.jpg" alt="Image 1"  /&gt;
      &lt;img class="imgOpa" src="img/image2.jpg" alt="Image 1"  /&gt;
      &lt;img class="imgOpa" src="img/image3.jpg" alt="Image 1"  /&gt;
      &lt;img class="imgOpa" src="img/image4.jpg" alt="Image 1"  /&gt;
      &lt;img class="imgOpa" src="img/image5.jpg" alt="Image 1"  /&gt;
    &lt;/p&gt;
  &lt;/article&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function() {
  $('.imgOpa').each(function() {
  $(this).hover(
  function() {
  $(this).stop().animate({ "opacity": 1.0, "margin-top":0, "margin-right":0, "margin-right":-50, "z-index":999, "height":250, "width":250 }, 100);
      },
  function() {
  $(this).stop().animate({ "opacity": 0.5, "margin-top":0, "margin-right":0, "margin-right":0, "z-index":1, "height":200, "width":200 }, 100);
      })
    });
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The way the images behave right now probably looks weird, but I'm just testing a few things out before I tackle a larger problem. As I said earlier, I am wanting the image that is being hovered over by the cursor to be above the other images. It has been 4 months since I last touched jQuery but have finally kicked myself awake and am re-acquainting myself with it.</p>
  
  <p>Cheers everyone!</p>