在悬停时添加颜色叠加层

Question

我希望实现此功能，如图片所示。

左边的图像是orignal，当我将鼠标悬停在该图像上时，我们定义的某些颜色应覆盖图像，如右图所示。我尝试过使用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;
        }