Question

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 ( 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");
});

Answer 1

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

Them a tags need to be block level.