CSS：緩解不工作的轉換

Question

我希望主頁上的圖像效果在鼠標懸停以及鼠標懸停時淡出。

我已將 all 1s ease;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

這是因爲您在懸停選擇器上使用了transition屬性。你應該像這樣把它放在圖像上：

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