Changing the top-margin on one image is shifting all images within the same container

I have a few Links/images sitting side by side in a container. The container has its overflow property set to overflow: hidden and the images are 'sunken' into the container using margin-top: -50px;.

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.

Here is a demo of what I have currently.

Here is my css (开发者_StackOverflow中文版 I will post it all in case there are problems somewhere else that is causing this)

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;

}

and html HTML markup is

<div id="w">
    <div id="iw">
        <div id="iiw">
            <a href="#">
                <img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" />
            </a>
            <a href="#">
                <img src="http://programmers.stackexchange.com/content/programmers/img/apple-touch-icon.png" />
            </a>
        </div>
    </div>
</div>

I'm using JQuery right now to do the hover events (for ease of use), however the final product will have no JQuery (so don't comment on the JQuery code)

Edit I realize I left that code out.. oops. very simple stuff. just using it to swap the margin-top property

$("a").hover(function() {
    $(this).children().css("margin-top", "-2px");
}, function() {
    $(this).children().css("margin-top", "-50px");
});

#iiw a {
    display: block;
    float: left;
}  

Them a tags need to be block level.

It appears that elements that share the same line will align themselves with the lowest element in that line. When you set the top margin of an image to be much lower than the rest, the other images will drop down so their bottom edges align with it.

To avoid this behavior, try adding vertical-align:top; to your #iiw a img block. I've applied the change to your example here.