在悬停时添加颜色叠加

Question

我想实现如图所示的这个功能。

左边的图像是原始的，当我将鼠标悬停在该图像上时，我们定义的一些颜色应该覆盖图像，如右图所示。我试过用 CSS 没用。我试图通过 SVG 来实现这一点，但我对此并没有太多经验。有没有什么方法可以达到这个效果。

更新

• 我不想在悬停时使用任何额外的图像。
• 我可以在悬停时选择任何其他颜色而不是黑色。

Answer 1

webkit-filter 可以做到这一点。

请尝试未悬停的图像：

img {
    -webkit-filter: contrast(10) grayscale(1);
}

然后将所有过滤器放在悬停上：

img:hover {
    -webkit-filter: none;
}

您必须知道，并非所有浏览器都支持-webkit-filter。检查this page也是一个好主意。它将帮助您找到正确的值。

Answer 2

使用可以在悬停时使用两个图像，您可以显示第二个图像并隐藏第一个图像。类似地，您可以使用第二个图像执行此操作

Answer 3

这里提出一个使用精灵的解决方案demo

<div class="picture-hover"></div>

.picture-hover {
            background: url(http://i.stack.imgur.com/55veX.png);
            width: 239px;
            height: 180px;
        }
        .picture-hover:hover {
            background: url(http://i.stack.imgur.com/55veX.png);
            width: 239px;
            height: 180px;
            background-position: -239px 0px;
        }