Problema con clases y mouseover

[Gorgonzola]

Hola, resuelto el problema para afectar un objeto mediante otro:

http://www.forosdelweb.com/f53/afectar-objeto-mediante-otro-1095680/

Pero ahora surge otro problema similar con otro elemento de la web:


Se trata de una serie de imágenes con un texto debajo que dirigen a diferentes secciones. Al poner el cursor encima de la imagen, esta se vuelve semitransparente y el texto cambia de color, así como al poner el cursor sobre el texto. Hasta ahí todo bien, simplemente utilizo el mismo sistema que en en el post anterior:

Código Javascript:

$(".desaparece").mouseover(function(){
  $(".imagen").mouseover(function(){
    $(".imagen").stop().fadeTo(100, 0.5);
    $(".texto").css("color", "#CCC");
  });  
  $(".texto").mouseout(function(){
    $(".texto").css("color", "#666");
    $(".imagen").stop().fadeTo(100, 1);
  });
});
 

El problema está en que los elementos con la clase .imagen y con la clase .texto se repiten a lo largo del html, y al pasar el cursor sobre uno de los elementos, todos los elementos con esas clases se ven afectados. ¿Como se haría para que solo se vean afectados la imagen sobre la que se coloca el cursor y su texto correspondiente o viceversa?