Jquery fade in fade out on hover

Hi I have this site http://bit.ly/9s6G73

and would like to implement a fade in fade out effect on hover in the ‘Our News’ section, so when I hover over a news item the grey background of that box fades in slowly, how can I do this?

Thanks

If you use jQuery, you can achieve this effect in all major browsers incredibly easily. Here’s a basic example:

<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
</head>
<body>

<div id='hover' style="height: 30px; width: 100px; background: #0C0;">Hover here!</div>
<div id='effect' style="height: 100px; width: 100px; display: none; background: #00C;"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$('#hover').hover(
		function(){$('#effect').fadeIn()}, 
		function(){$('#effect').fadeOut()}
	);
});
</script>
</body>
</html>

More information can be found here:
Use of Hover: http://api.jquery.com/hover/
Use of visual effects: http://api.jquery.com/category/effects/