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