jquery cambiar imagen de fondo en menu

[abraiante]

Hola a todos.

Pregunto aqui después de mirar millones de ejemplos y API de jquery.

Mi problema es el siguiente:

Tengo un menu, donde en la parte superior estan las opciones, y quiero que al ponerme encima de una de ellas, se cargue en un contenedor una foto. Añado efecto fadein y fadeout, es decir, al pasar de una opcion a otra, desaparece la imagen de una opción y aparece otra.

La solucion planteada es la siguiente:
Hago una lista, y cada opción de la lista tiene dos capas, la del texto y la imagen de fondo. Para posicionarlas uso posiciones absolutas: el texto lo coloco horizontalmente y las imagenes de fondo, al ocupar todo el espacio, las pongo con top:0 y left:0.

En el css le marco que solo una imagen esta activa, el resto le pongo display:none.

Mi problema es que consigo hacer que la imagen que esta presente desaparezca al pasar por encima del link con el fadeout, pero no consigo hacer que aparezca la siguiente.

Este es el marcado

Código HTML:

<div id="menu_pazos">
      <ul>
        <li id="menu_pazos_brexo">
          <div class="nombre"><a href="#">PAZO DE BREXO</a></div>
          <div class="foto"></div>
        </li>
        <li id="menu_pazos_orto">
          <div class="nombre"><a href="#">PAZO DE ORTO</a></div>
          <div class="foto"></div>
        </li>
        <li id="menu_pazos_cenador">
          <div class="nombre" ><a href="#">EL CENADOR</a></div>
          <div class="foto"></div>
        </li>
        <li id="menu_pazos_loureiros">
          <div class="nombre"><a href="#">OS LOUREIROS</a></div>
          <div class="foto"></div>
        </li>
      </ul>
    </div> 

Este es el css

Código HTML:

#menu_pazos
{
	border:solid 1px #336699;
	width:900px;
	height:400px;
	padding:0;
	margin:0;
	position:relative;
}

#menu_pazos ul
{
	list-style:none;
	padding:0;
	margin:0;
	position:absolute;
	top:0;
	left:0;
}

#menu_pazos ul li
{
	padding:0;
	margin:0;
	position:absolute;
	left:0;
	top:0;
}

#menu_pazos ul li .nombre
{
	width:224px;
	text-align:center;
	position:absolute;
	top:0;
	z-index:2;
	border-bottom:solid 1px #336699;
}

#menu_pazos ul li .foto
{
	width:900px;
	height:400px;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

#menu_pazos_brexo .nombre
{
	left:0;
}

#menu_pazos_brexo .foto
{
	background-image:url(../images/layout/menu-pazos-brexo.png);
}

#menu_pazos_orto .nombre
{
	left:225px;
}

#menu_pazos_orto .foto
{
	background-image:url(../images/layout/menu-pazos-orto.png);
	display:none;
}

#menu_pazos_cenador .nombre
{
	left:450px;
}

#menu_pazos_loureiros .nombre
{
	left:675px;
}

#menu_pazos a
{
	text-decoration:none;
	color:#999;
}

#menu_pazos a:hover
{
	text-decoration:none;
	color:#FFF;
}

Y esto es lo que llevo echo de jquery

Código:

$(function() {
	$('#menu_pazos > ul > li > .nombre').hover(
        function () 
		{
			var $this=$(this);
			$('.foto',$this.parent().parent()).css({display:inherit});		
        },
        function () 
		{}
    );
});

Gracias de antemano por la atención prestada