codice:
<script>
$(document).ready(
function(){
$(".project img").mouseover(
function(){
$(this).animate({ opacity: '0.65' }, 300);
$(".text-box").animate({ opacity: '1' }, 300);
})
$(".project img").mouseout(
function(){
$(this).animate({ opacity: '1' }, 300);
$(".text-box").animate({ opacity: '0' }, 300);
})
})
</script>
Ciao a tutti,
spero di essere stata abbastanza chiara nel titolo o di esserlo nella richiesta qua sotto:
ho creato una lista di immagini e al passaggio del mouse sopra un singolo elemento (".project img") voglio che l'opacity cambi e che appaia una caption (".text-box") che ho già posizionato al centro dell'immagine.
Il codice scritto finora modifica corretamente l'opacity della singola immagine interessata dal mouseover ma modifica tutte le immagini presenti nella pagina che possiedono la classe ".text-box", e non soltanto quella selezionata.
Non so se il "this" può essere usato per multipli elementi o se sbaglio concettualmente la risoluzione di questo problema, spero sappiate aiutarmi voi e che non sia totalmente fuori strada.
Grazie a tutti quelli che vorranno aiutarmi! 

Ines