黑色圖像在圖像上淡出

-5

我在我的主頁（或index.html）上有圖像，我希望能夠將圖像懸停在圖像上，然後黑色圖像以低透明度淡入淡出。黑色圖像在圖像上淡出

例如：http://wethepeoplebmx.de/hardgoods - 如果您將鼠標懸停在其中一幅圖像（或產品）上，您可以看到我想要淡化的東西。我對HTML和CSS相當陌生，還有腳本和類似的東西。我假設它的東西做CSS，例如，懸停等提前

來源

2015-04-14 Josh Murray

顯示你的代碼的努力。 –

比onhover事件和一個大多透明（~20％或許不透明）更多的事情？ –

這將是毫無意義的顯示代碼，因爲我沒有添加一個圖像在另一個，我不太確定如何去做，這就是爲什麼我問這個問題;你能給我一些關於如何做到這一點的代碼嗎？ –

謝謝我想你想是這樣的 -

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

來源

2015-04-14 13:21:25

是的，是的！但是，不是黑色來臨，是否有可能教我如何讓它褪色？ –

你想淡出圖像或黑色？ –

@JoshMurray檢查我張貼的重複網址：http://stackoverflow.com/questions/21145621/css-transition-opacity-fade-background – Bram

你可以用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>

來源

2015-04-14 13:39:44 Stewartside

黑色圖像在圖像上淡出

回答

相關問題