How to add a curtain on top of the google map-Collection of common programming errors

I assume you have tried to place a over the top of the map using jQuery to slide the curtain up?

This slides the wrong way, but you get the idea in this jsfiddle

HTML

CSS

#map{
    background-image: url('http://0.tqn.com/d/webtrends/1/0/e/2/-/-/google-maps-walk-2.jpg');
    height:400px;
    width:400px;
}

#curtain{
    background-image: url('http://www.vectordiary.com/isd_tutorials/005_curtain/step02_2.gif');
    height:400px;
    width:400px;
    margin-top:-400px;
}

jQuery

$('#curtain').click(function(){
    $(this).slideUp("slow");
});