CSS遷移がホバーでフェードします

Question

CSSトランジションで問題が発生しました。私はポートフォリオのためにCSSギャラリーを設計しています。私はホバーでフェードインするために自分のイメージが必要です。 私はこれで1時間以上遊んでいました。誰かが私を正しい方向に向けることを望んでいました。ここで

は、これは私があなたのイメージギャラリーのために順不同リストを使用することをお勧めしますトリック

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

Answer 1

を行いますJSFiddle

Answer 2

とそれへの簡易版です。

あなたがホバリングした後にイメージが50％の不透明度で即座に得られるようにしたい場合を除き、私のコードを使用してください。あなたはよりスムーズに移行します。

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