悬停时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; 
}