图像悬停叠加 - 需要彩色透明度

Question

当您将鼠标悬停在图像上时，我正在尝试添加彩色透明叠加层（任何颜色：紫色、蓝色、红色、橙色都可以），但我得到的是白色透明叠加层。请注意，我正在使用引导网格，以便我的图像保持响应。我已经尝试了所有我能想到的...添加背景颜色：带有一些不透明度的蓝色，但我被卡住了。白色覆盖看起来不错，但我想用这种颜色找点乐子。请在下面查看我的代码并告诉我我需要做什么。非常感谢！

<div class="container">
        <div class="row">
            <div class="hover12 col-lg-3 col-sm-4 col-xs-6">
                <a href="#" class="thumbnail">
                     <img src="images/flowers4.jpg" class="img-responsive">
                </a>
            </div>
             <div class="hover12 col-lg-3 col-sm-4 col-xs-6">
                <a href="#" class="thumbnail">
                     <img src="images/flowers5.jpg" class="img-responsive">
                </a>
            </div>
     </div> <!-- closes div row -->
</div> <!-- closes div container -->

CSS 代码：

.hover12 img {
    background-color: blue;
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hover12 img:hover{
    opacity: .5;
}

Answer 1

opacity 淡出整个元素，包括其背景，它不会使内容透明并且背景显示出来。相反，您想要做的是在图像下方放置一个带有您的颜色（可能是蓝色）的元素并使图像不透明（使用opacity），或者在图像顶部隐藏并显示一个具有一定透明度的元素。

这是一个例子。悬停时，图像变为 50% 不透明，您可以看到其下方的蓝色元素显示出来。

.img-container {
  background-color: blue;
  display: inline-block;
  line-height: 0;
}

.img-container img:hover {
  opacity: .5;
}

<div class="img-container"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQU-rOCZDSdyIGgSvZhU-lqIhG32Yd8KrwI3gWKXSCayFXQuJTx0g" /></div>

---

编辑：

我刚刚又看了一遍你的代码，发现你基本上是对的，除了你在img元素上设置了背景颜色，但它应该设置在包含img的元素上，即@987654326 @class，所以尝试添加：

.thumbnail {
    background-color: blue;
}

Answer 2

这可能最好使用覆盖图像的伪元素来完成。以下是如何创建一个覆盖图像并在图像翻转时降低不透明度的伪元素：

#theimg {
    position: relative;
    display: inline-block;
}

#theimg::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: blue;
    opacity: 1;
}


#theimg:hover::after {
    opacity: .5;
}

<div id="theimg">
    <img src="https://i.imgur.com/LDR6AWn.png?1" />
</div>

Answer 3

最简单的方法是使用:before进行半透明叠加：

img:hover:before {
    content: '';
    position:absolute;
    top:0;left:0;bottom:0;right:0;
    background:rgba(0,0,255,0.3);
}

缺点是它会阻止可点击的图像，当您在 HTML 中使用带有 CSS background 而不是 <img /> 的图像时可能会出现问题。

---

另一种方式，如果 Internet Explorer 支持不是问题（如果此效果只是为了展示，可能就是这种情况），您可以使用 CSS filter。这并不像在图像上覆盖透明图像那么容易，但是您可以获得一些非常好的效果：

img.grayscale:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
img.contrast:hover { -webkit-filter: contrast(150%); filter: contrast(150%); }
img.brightness:hover { -webkit-filter: brightness(1.5); filter: brightness(1.5); }
img.hue-rotate:hover { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); }
img.saturate:hover { -webkit-filter: saturate(2); filter: saturate(2); }
img.blur:hover { -webkit-filter: blur(2px); filter: blur(2px); }
img.invert:hover { -webkit-filter: invert(1); filter: invert(1); }
img.sepia:hover { -webkit-filter: sepia(75%); filter: sepia(75%); }

对于您的问题，我建议使用 .hue-rotate 并可能添加 CSS transition。注意：可以组合效果！

玩转滑块： http://www.cssreflex.com/css-generators/filter/ 或 http://html5-demos.appspot.com/static/css/filters/index.html