Quote Originariamente inviata da Ines_88 Visualizza il messaggio
Ciao Luca, grazie mille per la tua risposta!!!
Non conoscevo questo utilizzo del This, in effetti non conosco molto il javascript e le guide che avevo consultato mostravano altri millemila modi di utilizzarlo.

Risolto questo problema però mi sono accorta subito di un altro piccolo bug presente: appena passo col mouse sopra l’immagine, il text-box appare correttamente, ma appena arrivo sopra di lui questo scompare

Ho provato a duplicare lo script di prima dedicandolo al text-box ma questo al massimo scompare e riappare, creando un effetto non corretto

Hai ragione, dovevo indicare anche il mio markup, eccolo qui:

codice:
<div class="col-md-6 project">
    <a href="../page/">
        <img src="../img/image.png">
    </a>
    <a href="../page/">
        <div class="text-box">
            <p class="project-title”>Project Title</p>
            <p class="project-desc”>Description</p>
        </div>
    </a>
  </div>
Scompare perché applichi gli eventi mouseover/mouseout solo sul tag img, di conseguenza, quando il mouse si sposta sul caption, scatta l'evento mouseout applicato all'immagine.


Conviene applicare gli eventi hover direttamente alla classe project e poi riferirsi agli elementi al suo interno.
codice:
$(".project").mouseout( 
   function(){
        var scope=$(this);// elemento con classe project oggetto dell'evento.
        $('img',scope).animate({ opacity: '1' }, 300); //opacity dell'immagine nel nostro .project
        $(".text-box",scope).animate({ opacity: '0' }, 300); //.text-box "figlio" del .project
   }) 
})