Question

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

示例：http://wethepeoplebmx.de/hardgoods - 如果您将鼠标悬停在其中一个图像（或产品）上，您可以看到我想要完成的淡入淡出。我是HTML和CSS的新手，还有脚本和类似的东西。我假设它与CSS有关，例如，悬停等等。

提前致谢

Answer 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>

Answer 2

您可以使用CSS3动画和:hover执行此操作。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

黑色图像淡出图像

2 个答案: