如何在div悬停时在图像上叠加背景色

Question

 #overlay{ display:none; position:relative; background-color:rgba(0,0,0,0.5); top:0; left:0; z-index:0; } #main{ min-height:100px; border:1px solid; } #main:hover #overlay{ display:block; } 

 <div id="main"> <div id="overlay"></div> this is something </div> 

I am trying to show a backgorund color on hover of the div and i have image in div instead of text in real code

Answer 1

You can use #main:hover:after for the overlay. Try this.

 #main{ min-height: 100px; border:1px solid; position: relative; display: inline-block; } #main:hover:after{ content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-color:rgba(0,0,0,0.5); } 

 <div id="main"> <img src="http://via.placeholder.com/640x360"> </div> 

Answer 2

Use position:absolute , height:100% & width:100%

 #overlay{ display:none; position: absolute; background-color: rgba(0,0,0,0.5); top: 0; left: 0; z-index: 1; width: 100%; height: 100%; } #main{ position:relative; min-height:100px; border:1px solid; } #main:hover #overlay{ display:block; } 

 <div id="main"> <div id="overlay"></div> this is something </div> 

Answer 3

give position:relative to #main and add the below style to #overlay id:

#overlay {
    display: none;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    bottom: 0;
}

Answer 4

  #overlay{ display:none; position:absolute; content:''; left:0; right:0; bottom:0; top:0; background-color:rgba(0,0,0,0.5); } #main{ min-height:100px; border:1px solid; position:relative; } #main:hover #overlay{ display:block; } 

 <div id="main"> <div id="overlay"></div> this is something </div> <!-- begin snippet: js hide: false console: true babel: false -->