将鼠标悬停在Wordpress投资组合列表中时更改图像

Question

我在我的网站上使用wordpress，主页上设置了一个视觉作曲家的"投资组合列表"小部件。

我有一个图像(链接(的砖石，点击后会指向项目的页面。

主页上的特色图片是投资组合项目页面上设置的"特色图片"。有没有机会在主页上使这些图像黑白，然后在悬停时着色？因此，当您访问页面时，它们是黑白的，然后在您将鼠标悬停在它们上时着色！

链接是：http://svenharambasic.com

谢谢

Answer 1

CSS有可以使用的滤镜效果。请注意，它们与旧版浏览器不完全兼容。但是filter: grayscale(100%)图像和悬停时filter: grayscale(0%)会给你一个简单的效果，就像你描述的那样：

.projects_holder img {
filter: grayscale(100%);
transition: .25s all ease-out;
}
.projects_holder img:hover {
filter: grayscale(0%);
}

<div class="projects_holder">
<img src="https://placekitten.com/200/300" />
<img src="https://placekitten.com/220/280" />
<img src="https://placekitten.com/300/250" />
</div>

如果您愿意，有一些方法可以获得更好的浏览器支持：https://gist.github.com/karlhorky/3478370