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