Question

在索引库中，Flat-iron模板允许在悬停时改变不透明度，但我想知道我是否可以反转它，即让图像保持低不透明度，直到你将鼠标悬停在它们上面以显示真实图片。 （即如何将缩略图显示为黑色叠加层，直到您将鼠标悬停在显示真实图像上）

我想确保在插入代码时，它不会取消其他鼠标悬停在模板中的效果 - 例如图像缩放，文本叠加和淡入淡出。 __ 我也想知道选项2（如果这是一个更简单的解决方案？），我想知道是否可能让图像显示为黑白，直到你悬停显示颜色。）

抱歉，我知道有两个问题被压成了一个帖子。尽管如此，谢谢你的帮助！认真地欣赏它！

Answer 1

你可以使用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属性的更多信息（可以让您使用图片执行各种技巧），请查看the docs。特别要看亮度。这就是我首先想到的，而不是不透明度或灰度：将亮度设置为.9，并在悬停时将其更改为完整。

如果你有像淡入效果这样的东西，你也必须要小心，这会使你的悬停效果看起来很奇怪。例如，如果将鼠标悬停在其中一个图像上时会出现某种淡入，则突然更改灰度会看起来不对。您需要以与其他淡入效果相同的速度进行更改淡入淡出。

要执行此操作，请查看CSS transition属性this。

Squarespace代码注入帮助 - 扁铁模板悬停效果

1 个答案: