How do I resize a div on mousover…

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

For example, if the following is my XHTML Strict:

[code=html]
<div class=”box”>
<div class=”display”>
<img src=”picture.png”>
</div>
</div>
[/code]

And, the following is my CSS:

[CODE].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;
}[/CODE]

And, the image is 750×1000.

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.

Also in #JavaScript _↴