<style>

#container {  
    width: 850px;   
    margin: auto;  
}  

.back  
{  
    position:absolute;  
    top:0;left:0;  
}  
.wrap  
{  
    width:550px;  
    height:390px;  
    position:relative;  
    margin:auto;  
    overflow:hidden;  
}  

.comment  
{  
    position: absolute;  
    width: 550px;
    height: auto;
    top: 400px;  
    left: 0px;  
    letter-spacing: -1px;  
    color: white; font: 24px/45px Berlin Sans FB, Sans-Serif;  
    background: #4A4D4A;  
    padding: 10px;  
    filter:alpha(opacity=60);  
    -moz-opacity:0.6;  
    -khtml-opacity: 0.6;  
    opacity: 0.6;  
    line-height: 90%  
} 

</style>

<button onclick="overlay()">Click Me!</button>

<div class="wrap">
    <img class="backer" src="../../Content/leopard.jpg" alt="image"/>
        
    <span class="comment">
        Loading...
    </span>
</div>



<script type="text/javascript">
    function overlay() {
        $('.wrap').children('.comment').stop().css("top", "0px");
    }
</script>