Dissolvenza transizione CSS su hover

Question

Ho riscontrato un problema con le transizioni CSS. Sto progettando una galleria CSS per il mio portfolio e ho bisogno che le mie immagini appaiano al passaggio del mouse. Ho giocato con questo per più di un'ora e speravo che qualcuno potesse indicarmi la giusta direzione.

Ecco una versione semplificata ad esso con JSFiddle

Answer 1

vi consiglio di utilizzare una lista non ordinata per la galleria di immagini.

È necessario utilizzare il mio codice a meno che non si desideri che l'immagine ottenga immediatamente il 50% di opacità dopo il passaggio del mouse. Avrai una transizione più fluida.

#photos li { 
    opacity: .5; 
    transition: opacity .5s ease-out; 
    -moz-transition: opacity .5s ease-out; 
    -webkit-transition: opacity .5s ease-out; 
    -o-transition: opacity .5s ease-out; 
} 

#photos li:hover { 
    opacity: 1; 
} 

Answer 2

Questo farà il trucco

.gallery-item 
{ 
    opacity:1; 
} 

.gallery-item:hover 
{ 
    opacity:0; 
    transition: opacity .2s ease-out; 
    -moz-transition: opacity .2s ease-out; 
    -webkit-transition: opacity .2s ease-out; 
    -o-transition: opacity .2s ease-out; 
}