图像上的黑色透明覆盖图

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

这可以用做：before或：after

#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上的所有内容都改变为不透明度50％。在这种情况下，图像在div内。

有几种方法可以做到这一点。这只是另一个加入混合的人。祝你好运。

.parentdiv { 
 
    background-color:#000; 
 
    height:100%; 
 
    width:100%; 
 
    } 
 

 
    .imgdiv { 
 
     padding:30px; 
 
    } 
 

 
    .imgdiv a{ 
 
    \t opacity: 1; 
 
    \t filter: alpha(opacity=100); 
 
     \t -webkit-transition: opacity 0.5s linear; 
 
    } 
 

 
    .imgdiv a:hover { 
 
    \t opacity: 0.5; 
 
    \t filter: alpha(opacity=50); 
 
     \t -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>