黑色图像淡入图像[重复]答案

【问题标题】：Black image fade over image [duplicate]黑色图像淡入图像[重复]
【发布时间】：2015-06-20 02:48:59
【问题描述】：

我的主页（或 index.html）上有一张图片，我希望能够将鼠标悬停在图片上，然后黑色图片以低不透明度淡化。

示例：http://wethepeoplebmx.de/hardgoods - 如果您将鼠标悬停在其中一张图片（或产品）上，您可以看到我正在尝试完成的渐变。我对 HTML 和 CSS 以及脚本和类似的东西还很陌生。我假设它与 CSS 有关，例如悬停等。

提前致谢

【问题讨论】：

展示你的代码工作。
比悬停事件和大部分透明（大约 20% 可能不透明）的东西？
显示代码是没有意义的，因为我没有在另一张图像上添加一个图像，我不太确定该怎么做，这就是我问这个问题的原因；你能给我一些关于如何做到这一点的代码吗？
你可以使用 jQuery(".class").hover(...)。 api.jquery.com/hover

标签： html css image

【解决方案1】：

我想你想要这样的东西 -

.wrap{position:relative;height: 100px;width: 120px;}
    .wrap img{width: 100%;;height: 100%;}
    .effect{background: rgba(0, 0, 0, .5);;position: absolute;height: 100%;width: 100%;;top:0;display: none;}
    .wrap:hover .effect{display: block;opacity:.4}

<div class="wrap">
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQiWGXo4U6CCvNItlDYFgEQz4d3T-YjLj13nqUZ-crpAr3qMPx-">
        <div class="effect">
            text
        </div>
    </div>

【讨论】：

是的，是的！但不是黑色出现，你可以教我如何让它褪色吗？
你想淡化图像还是黑色？
@JoshMurray 检查我发布的重复网址：stackoverflow.com/questions/21145621/…
@BramDriesen 我有，但我必须弄清楚如何淡化文本

【解决方案2】：

您可以使用 CSS3 动画和 :hover 来做到这一点。

.wrap {
  width: 100px;
  height: 100px;
  position: relative;
}
.effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: none;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  /* ...and now for the proper property */
  transition: .5s;
}
.effect:hover {
  background: rgba(0, 0, 0, 0.4);
}

<div class="wrap">
  <img src="http://placehold.it/100x100">
  <div class="effect"></div>
</div>

【讨论】：