<div id="container">
        <h1>jQuery image slide on hover effect</h1>
        <div><a href="#"><img src="sex1.png" /></a></div>
        <div><a href="#"><img src="sex2.png" /></a></div>
        <div><a href="#"><img src="sex3.png" /></a></div>
        <div><a href="#"><img src="sex4.png" /></a></div>
</div>

/* simple reset */
html,body,div,h2,img {margin:0;padding:0;border:none;}

html {
        font:1em Arial, Helvetica, sans-serif;
        color:#444;
}
h1 {    text-align:center;}
#container {
        margin:100px auto;
        width:909px;
}
#container div {
        margin-right:3px;
        float:left;
        width:200px;
        height:234px;
        border:1px solid #999;
        position:relative;
        overflow:hidden;
}
#container img {
        position:absolute;
}

$(function(){
        $("#container div a").hover(function(){
                $("img", this).stop().animate({top:"-234px"},{queue:false,duration:200});
        }, function() {
                $("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
        });
});