How do you have an object slide up as if it were hidden behind something, rather than bending out.

example

In the jsfiddle demo, you can see the circle bends flat as it slides, but I'd like it to slide out as if it were hidden behind something. (I unfortunately can't just put an image or div with the same background color over the circle and have the circle underneath slide upward.)

html

<div class="button">Hover</div>
<div class="box">
    Sliding down!
</div>

jquery

$('.box').hide();
$('.button').hover(
    function() {
        $('.box').slideToggle('slow');
    }
);

update: You guys had really good answers! But I found one of the solutions: http://jsfiddle.net/7fNbM/36/ I decided to just wrap the .button div and .box div in a container, and give the container a specific height, specific width, and overflow of hidden. This way I wouldn't have to cover the image in the background and it provides the effect I was looking for.