Transition CSS fondu sur le vol stationnaire

Question

J'ai rencontré un problème avec les transitions CSS. Je suis en train de concevoir une galerie CSS pour mon portfolio et j'ai besoin de mes images pour fondre en vol stationnaire. J'ai joué avec ça pendant plus d'une heure et j'espérais que quelqu'un pourrait me diriger dans la bonne direction.

Voici une version simplifiée avec JSFiddle

Answer 1

Je vous recommande d'utiliser une liste non ordonnée pour votre galerie d'images.

Vous devriez utiliser mon code sauf si vous voulez que l'image gagne instantanément 50% d'opacité après avoir survolé. Vous aurez une transition plus douce.

#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

Ce fera l'affaire

.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; 
}