懸停時CSS過渡淡入淡出

Question

我遇到CSS過渡的問題。我正在爲我的投資組合設計一個CSS畫廊，我需要我的圖像在懸停時淡入。 我一直在玩這個一個多小時，我希望有人能指引我進入正確的方向。

下面是一個簡化版本，它與JSFiddle

Answer 1

我建議你使用一個無序列表，爲您的圖片庫。

您應該使用我的代碼，除非您希望圖像在您懸停後立即獲得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; 
} 

Answer 2

這將這樣的伎倆

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