title: Changing the top-margin on one image is shifting all images within the same container
body: <p>I have a few Links/images sitting side by side in a container. 
  The container has its overflow property set to <code>overflow: hidden</code> and the images are 'sunken' into the container using <code>margin-top: -50px;</code>.</p>
  
  <p>When the user hovers over the link I want the image to slide down out of the container and when the user hovers out the image jumps back up. </p>
  
  <p><a href="http://jsfiddle.net/rlemon/zjWaz/8/" rel="nofollow">Here is a demo of what I have currently.</a></p>
  
  <p>Here is my css ( I will post it all in case there are problems somewhere else that is causing this) </p>
  
  <pre><code>html, body {
      width:100%;
      height: 100%;
      margin:0;
      padding:0;
  }
  #w {
      display:table;
      width: 100%;
      height: 100%;
  }
  #iw {
      display:table-cell;
      text-align:center;
      vertical-align:middle;
      width: 100%;
  }
  #iiw {
      border-top: 1px solid #000;
      height: 125px;
      overflow: hidden;
  }
  #iiw a {
       margin-left: 8px;
       margin-right: 8px;   
  }
  #iiw a img {
      margin-top: -50px;
      height: 100px;
      -moz-box-shadow:0 0.8em 1em #444;
      -webkit-box-shadow:0 0.8em 1em #444;
      -o-box-shadow:0 0.8em 1em #444;
      box-shadow:0 0.8em 1em #444;
      -moz-border-radius:0 0 10px 20px;
      -webkit-border-radius:0 0 10px 20px;
      -o-border-radius:0 0 10px 20px;
      border-radius: 0 0 10px 20px;
  
  }
  </code></pre>
  
  <p>and html HTML markup is </p>
  
  <pre><code>&lt;div id="w"&gt;
      &lt;div id="iw"&gt;
          &lt;div id="iiw"&gt;
              &lt;a href="#"&gt;
                  &lt;img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" /&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
                  &lt;img src="http://programmers.stackexchange.com/content/programmers/img/apple-touch-icon.png" /&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using JQuery right now to do the hover events (for ease of use), however the final product will have no JQuery (<strong><em>so don't comment on the JQuery code</em></strong>)</p>
  
  <hr>
  
  <p><strong>Edit</strong> I realize I left that code out.. oops. 
  very simple stuff. just using it to swap the <code>margin-top</code> property</p>
  
  <pre><code>$("a").hover(function() {
      $(this).children().css("margin-top", "-2px");
  }, function() {
      $(this).children().css("margin-top", "-50px");
  });
  </code></pre>