How do I resize a div on mousover...

[metropolitica]

...on a page that displays content that scales to browser size, using Javascript?

For example, if the following is my XHTML Strict:

<div class="box">
     <div class="display">
           <img src="picture.png">
     </div>
</div>

And, the following is my CSS:

.box {
     position: relative;
     width: 96%;
     margin: 0;
     padding: 0 2%;
}
.box .display {
     width: 50%;
     height: 38%;
     margin: 0;
     padding: 0;
     overflow: hidden;
}
.box .display img {
     width: 100%;
     height: auto;
}

And, the image is 750x1000.

My code allows only the top half of the image to show, initially, which is how I want it. But, how do I have the rest of the image show on mouseover, with the basic animation of the div expanding to reveal the rest of the image? I'm using jQuery for a few other things on the site, so I'd like to stay with that library if possible.

Thanks for your help.

- m