圖像上的黑色透明覆蓋

Question

當你將鼠標懸停在圖像上時，我試圖在圖像上留下淺黑色的疊加層（就像文本一樣）抱歉，我是css和HTML的新手！

幫助將不勝感激

HTML

<div id="con">
   <div id="box1">
      <p id="text1">
         <a href="url">DESTINATIONS</a>
      </p>
      </p>
      <p id="text2">
         AMALFI<BR>SORRENTO<BR>POSITANO</a>
      </p>

      <p id="text3">
         <a href="url">THINGS TO DO</a>
      </p>
      </p>
      <p id="text4">
         TOURS<BR>MUSUEMS<BR>SHOPPING</a>
      </p>
</div>

CSS

#con {
   width:1024px;
   height:670px;
   background-color: #161717;
}


#box1 {
   float: left;
   font-size: 25px;
   width: 388px;
   height: 477px;

   background-image: url(media/trying1.png);
   background-size: cover;
   margin-left: 120px;
   margin-top: 90px;
}


#text1 {
   z-index:100;
   color:white;
   font-size:30px;
   text-align: center; 
   margin-top:80px;
   line-height:55px;
   opacity: 0;
   transition: all 0.5s;
}

#box1:hover #text1 {
   opacity: 1;
}   

Answer 1

這可以通過以下方式完成：之前或之后

#box1{
  position:relative;
}

#box1:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:black;
    opacity:0;
    z-index:0;

}

#box1:hover:before{
 opacity:.6;   
 transition: all 0.5s;
}

#box1 > *{
    position:relative;
    z-index:1;
}

http://jsfiddle.net/4bo4zju7/3/

Answer 2

CS3很棒！ 您不再需要JS來實現簡單的翻轉效果。 Gopalraju的上述代碼應該可以使用，下面的例子也是如此。 您可以使用它，並根據需要使用代碼。

父div具有黑色頁面背景，並且imgdiv將鼠標中的所有內容更改為不透明度，鼠標滾過div。 在這種情況下，圖像在div內。

有幾種方法可以做到這一點。 這只是另一個廣告。 祝好運。

 .parentdiv { background-color:#000; height:100%; width:100%; } .imgdiv { padding:30px; } .imgdiv a{ opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.5s linear; } .imgdiv a:hover { opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: opacity 0.5s linear; } 

 <div class="parentdiv"> <div class="imgdiv"> <a href="http://www.domain.com.au/link.html"> <img src="http://placehold.it/350x150" alt="image" height="150" width="350"> </a> </div> </div>