CSS：缓出过渡不起作用[关闭]

Question

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

我变了 all 1s ease; to: all 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;
}