Question

我在我的网站上使用wordpress，并且主页上设置了可视化作曲家的“作品集列表”小部件。

我有一堆图像（链接），这些图像（链接）在单击时指向项目页面。

主页上的图像是在项目集项目页面上设置的“特征图像”。是否有机会在首页上将此图片设为黑白，然后在悬停时着色？因此，当您访问页面时，它们是黑白的，一旦将它们悬停在它们上，它们就会上色！

谢谢

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

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

1 个答案: