Black transparent overlay on image

问题

I'm trying to get a light black overlay on the image when you hover on it (like the text) sorry I'm new to css and HTML!

help would be appreciated

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

回答1:

This can be done with :before or :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/

回答2:

CS3 is great! You no longer need JS for simple rollover effects. Gopalraju's above code should work and so does my example below. You can have a fiddle with it and use the code as you see fit.

The parent div, has a black page background, and the imgdiv changes everything inside it to a opacity by 50% on the mouse rolling over the div. In this case the image is inside the div.

There are a few ways of doing this. This is just another one to ad into the mix. Good luck.

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

来源：https://stackoverflow.com/questions/30526307/black-transparent-overlay-on-image

标签

html

css

image

opacity