hide image upon mouseover

[markjson]

Hi,

What I want to do:

I have a img tag, which I want to fade out upon mouseover, showing the text underneath it, and then fade in upon mouseout behaviour.

The following is the code:

<div id="box1" class="rollover1" style="background:#d61c5c;">
       <img src="uploads/images/box1.jpg" width="147" height="147" alt="About Us" class="fade"/>
       <a href="#"><div id="rollover_text"><strong>ABOUT US</strong><br /><br />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br /><br /><p align="right"><u>More</u></p>
       </div></a>
</div>

With the following jQuery code:

$(document).ready(function () {
	$("img.fade").hover(function(){
		$(this).fadeTo("slow", 0);
		},function(){
			$(this).fadeTo("slow", 1);
	});
});

What is actually happening is this:
Upon mouseover, it does successfully fades out the image, but it doesn't show the text underneath it, only the background colour of the div.

What I think might be happening is that the fadeout behaviour is simply decreasing image opacity, instead of removing it altogether. But even if this is what it's doing, it should still show the text in the background div.

What am I doing wrong, and how can I achieve the desired results?

Thanks in advance!

Mark