CSS:缓出过渡不起作用

Question

我希望主页上的图像效果在鼠标悬停和鼠标悬停时淡出。

我变了 all 1s ease;：所有1s ease-in-out;但它仍然没有在鼠标退出时淡出，但它只是跳跃。

地点： http://wolf-photoart.witconsult.de/

这是我当前 CSS 的示例：

#mainportraits img, #mainart img, #maincomics img { max-width: 56vw; }
#mainportraits img:hover, #mainart img:hover, #maincomics img:hover{
    -webkit-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
    -moz-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
    -o-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
    -ms-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
    filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#mainportraits:after{
    content: 'Portraits';
    z-index: 9999;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
} 
#mainportraits:hover:after{
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;   
    }

我做错了什么？谢谢！

Answer 1

这是因为您在悬停选择器上使用了过渡属性。相反，您应该像这样将其放在图像上：

#mainportraits img {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}