Overlapping one image over another on mouse-over

Hi *.*,
Last day i c this advt. I feel its nice, so i planned and done.'n Here its go.
Css

<style type="text/css">
.boxgrid {
    float: left;
    height: 126px !important;
    overflow: hidden;
    position: relative;
}
.cover {
    position: absolute;
    top: 128px;
}
</style>

Jquery

<script type="text/javascript">
$(document).ready(function(){
//Vertical Sliding
$('.boxgrid').hover(function(){
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {$(".cover", this).stop().animate({top:'128px'},
{queue:false,duration:300});});});
</script>

Html

<table>
<tr>

<td align="left" valign="top" id="mnphome">

<ul>
  <li class="boxgrid">
    <img width="136" height="125" src="largest_netword_1.jpg">
      <h3 class="cover" style="top: 128px;">
        <img width="136" height="125" src="desc_1.gif">
      </h3>
  </li>

</ul>

</td>

</tr>

</table>

Don't forgot to add js file :)

'n u can download a sample from here


Stay Tune...


Have a nice day... 'N happy Coding :)