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