Problême de MouseOver Jquery

Bonjour,

J'essaie de faire un effet de rollover sur une image avec effet de fondu.
J'ai donc écrit ça :

$("li #base").mouseover(function () {
  $("li #base").fadeOut(1000);
  });
 
$("li #base").mouseover(function () {
  $("li #hov").fadeIn(100);
  });
 
$("li #hov").mouseout(function () {
  $("li #base").fadeIn(100);
  });
 
$("li #hov").mouseout(function () {
  $("li #hov").fadeOut(1000);
  });

et HTML :

<ul class="vignette">
 	<li><a href="img/hd/comm-graphiste-magazine-14.png" rel="shadowbox[tout]"><div id="base"></div><div id="hov"></div><img src="img/bd/graphiste-freelance-07.jpg" alt="" /></a></li>
	<li><a href="img/hd/illustration-graphiste-09.jpg" rel="shadowbox[tout]"><div id="base"></div><div id="hov"></div><img src="img/bd/graphiste-freelance-25.jpg"  alt="" /></a></li>
    </ul>

#base et #hov sont des div qui contiennent le background qui fond et...défond
en dessous la vignette.

Seulement je voudrais que l'effet agisse image par image et pas une image en mouseover = tout en fade (consulter le lien si dessous pour exemple) :
http://www.yoann-vermeulen.com/test.html


DOnc la solution... de débutant que j'ai trouvé serait de donné une classe pour chaqu'une de mes vignettes... et crée un script unique pour chaqu'une de ses vignettes... mais j'imagine qu'il y a une autre solution.

... help !

Merci par avance