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

Question

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

我有一个图像（链接）的砖石，点击导致项目的页面。

主页上的图片是投资组合项目页面上设置的“特色图片”。是否有机会在主页上将此图像设为黑白图像，然后在悬停时着色？所以当你访问页面时它们是黑白的，然后一旦你将它们悬停在它们上面就会变色！

链接是：http://svenharambasic.com

谢谢

Answer 1

CSS有你可以使用的Filter Effects。请注意，它们与旧版浏览器不完全兼容。但是图像上的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