在索引库中，Flat-iron 模板允许在您悬停时更改不透明度，但我想知道是否可以反转它，即让图像保持低不透明度，直到您将鼠标悬停在它们上以显示真实图片。 （即如何使缩略图显示为具有深色叠加层，直到您将鼠标悬停在上面以显示真实图像）
我想确保当我插入代码时，它不会取消模板中的其他悬停效果 - 例如图像缩放、文本叠加和淡入淡出。 __ 我也想知道选项 2（如果这是一个更简单的解决方案？），我想知道是否可以让图像显示为黑白，直到您将鼠标悬停显示颜色）。
抱歉，我知道这是把 2 个问题塞进一篇帖子里。尽管如此，还是谢谢你的帮助！！真心感谢！
【问题讨论】：
标签： jquery html css hover squarespace
你可以使用 CSS 来做任何一个，虽然我不能说模板中的其他效果会发生什么。解决这个问题的最好方法是检查 CSS 中你正在使用的任何元素，看看那里有什么。
CSS filter 属性允许您更改图像的灰度级别。所以，你可以这样做：
img {
-webkit-filter: grayscale(100%); /*Chrome*/
filter: grayscale(100%);
}
img:hover {
-webkit-filter: grayscale(0%); /*Chrome*/
filter: grayscale(0%);
}
这（当然）不适用于各种 Microsoft 浏览器，包括 Edge 12。
使用不透明度，您可以做很多相同的事情：
img {
opacity: .8;
}
img:hover {
opacity: 0;
}
现在，如果您有许多主题生成的效果，您必须小心一点，尤其是在使用不透明度时。例如，如果您的图像上有一个文本覆盖（您可能会这样做），那么降低图像的不透明度也可以降低文本覆盖的不透明度，具体取决于它在 HTML 中的构造方式。 （例如，如果您设置了 div 的不透明度，则其容器中的每个元素都将继承该设置。）如果您在不透明度方面遇到问题，另一种方法是在 filter 中设置不透明度，就像您设置灰度一样。
有关filter 属性的更多信息（它可以让您对图像进行各种技巧），请查看this。特别是，看看亮度。这就是我首先想到的，而不是不透明度或灰度：将亮度设置为，例如，0.9，然后在悬停时将其更改为完全。
如果你有淡入效果之类的东西，你也必须小心，这会使你的悬停效果看起来很奇怪。例如，如果当您将鼠标悬停在一张图像上时出现某种淡入，那么突然更改灰度看起来会出错。您需要使更改以与其他淡入效果相同的速度淡入。
为此，请查看 CSS transition 属性 here。
【讨论】：