Ciao Ines,
Come hai già constatato, l'istruzione
codice:
$(".text-box").animate({ opacity: '1' }, 300);
Applicherà una opacity 1 a *tutte* le istanze della classe text-box.
La soluzione sta proprio nell'utilizzo di *this*, che dovrai utilizzare sia per riferirti all'immagine da rendere visibile (come già fai) che per riferirti al caption.
Supponiamo che questo sia il tuo HTML (Che non hai riportato nel porre il quesito, ahi ahi ahi... )
codice:
<figure class="project">
<img src="" alt="">
<figcaption class="text-box">Text</figcaption>
</figure>
Visto che l'evento è associato al tag img, il this nella funzione sarà, appunto, un riferimento al tag img.
Per localizzare il giusto caption, farò sempre riferimento al this, ma risalirò al caption per mezzo del parent (contenitore) del tag img.
codice:
$(".project img").mouseout(
function(){
$(this).animate({ opacity: '1' }, 300);
var scope=$(this).parents('.project'); //riferimento al nodo padre
$(".text-box",scope).animate({ opacity: '0' }, 300); //.text-box *nel* nodo padre
})
})
Buon proseguimento.