Question

我为此网站https://sandbox.graphicandwebdesign.ca/karim-jamous/newsletter/index.html上的图片库在图片上添加了过渡效果，可以缓和（淡入），但是当鼠标移到图片上时，它会立即返回到其原始状态？离开鼠标时，有什么方法可以使转换反向？

Answer 1

将过渡添加到非悬停状态：

.gallery img {
    box-shadow: 7px 7px 13px 0px rgba(0,0,0,0.75);
    filter: grayscale(100%) blur(1px);
    transition: 1s;
}

此处的基本原理是，当您不将鼠标悬停在图像上时，:hover规则将不再适用。因此，如果transition在:hover下声明，则它在退出悬停时实际上就不复存在了。

Answer 2

这是您的解决方案

.gallery img:hover {
    filter: grayscale(0%);
    
}

/*you need to use transition in image  here*/ 
.gallery img {
    box-shadow: 7px 7px 13px 0px rgba(0,0,0,0.75);
    filter: grayscale(100%) blur(1px);
    transition: 1s;
}

<div class="gallery"> <img src="https://sandbox.graphicandwebdesign.ca/karim-jamous/newsletter/pic4.jpg" width="250" height="250" alt="fourthpicture"> </div>

CSS过渡放宽，但不放宽？

2 个答案: