黑色图像在图像上淡出

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来做到这一点。

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