Here's what I'm trying to do...

http://newwebdesign.com/newsite/

Mouseover the main image and you can see -- and use -- the accordion.
Here's the code...

Code:
<div id="accordion" onmouseover="document.getElementById('overlay').style.top='-384px'" onmouseout="document.getElementById('overlay').style.top='0'">

#overlay {
	position:absolute;
	width:779px;
	height:384px;
	background:url('images/accord_overlay.png');
	z-index:1000;
}
Can I use jQuery to gradually 'dispose' of the image, rather than have it disappear/reappear instantly?

And still have the accordion layer be accessible, not just visible?

Grateful for any help!