Pure CSS sliding garage door technique

#containerbox {
    width: 100%;
    height: 245px;
    background: #e4e3e0;
    position: relative;
    overflow: hidden;
}
.garagedoor {
    width: 96%;
    padding: 10px 2%;
    height: 30px;
    background: #d61d7d;
    position: absolute;
    bottom: 0;
    left: 0;
    -moz-transition-duration: 4.5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: 4.5s;
    -o-transition-property: all;
    -o-transition-duration: 4.5s;
}
.garagedoor:hover {
    margin-bottom: 195px;
    -moz-transition-duration: 4.5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: 4.5s;
    -o-transition-property: all;
    -o-transition-duration: 4.5s;
}

 The Pure CSS3 way works in IE but without the transition.

You can also do this with jQuery:

$('.frontpagetextarea').hover(function(){
                $(this).animate({'height': '200px'}, 500);
            }, function(){
                $(this).animate({'height': '50px'}, 500);
            });

Or, try my other tutorial for onclick rather than hover

http://www.variablevisions.com/articles/jQuery-and-CSS3-Garage-Doors-using-toggleClass