If you don't mind messing with z-index, but you want to avoid adding extra div for overlay, you can use the following approach
/* make sure ::before is positioned relative to .foo */
.foo { position: relative; }
/* overlay */
.foo::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 0;
}
/* make sure all elements inside .foo placed above overlay element */
.foo > * { z-index: 1; }
CSS:
#box{
border:1px solid black;
position:relative;
}
#overlay{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color:rgba(255,255,0,0.5);
}
Here is an overlay using a pseudo-element (eg: no need to add more markup to do it)
.box {_x000D_
background: 0 0 url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);_x000D_
width: 300px;_x000D_
height: 200px;_x000D_
}_x000D_
_x000D_
.box:after {_x000D_
content: "";_x000D_
display: block;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
background: rgba(0, 0, 0, 0.4);_x000D_
}
_x000D_
<div class="box"></div>
_x000D_
div{
background-image:url('');
background-size:cover;
background-position:top center;
position:relative;
}
div:before{
content:'';
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background-color:rgba(0,0,0,0.7);
}
I was just playing around with a similar problem on codepen, this is what I did to create an overlay using a simple css markup. I created a div element with class .box applied to it. Inside this div I created two divs, one with .inner class applied to it and the other with .notext class applied to it. Both of these classes inside the .box div are initially set to display:none but when the .box is hovered over, these are made visible.
.box{_x000D_
height:450px;_x000D_
width:450px;_x000D_
border:1px solid black;_x000D_
margin-top:50px;_x000D_
display:inline-block;_x000D_
margin-left:50px;_x000D_
transition: width 2s, height 2s;_x000D_
position:relative;_x000D_
text-align: center;_x000D_
background:url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG');_x000D_
background-size:cover;_x000D_
background-position:center;_x000D_
_x000D_
}_x000D_
.box:hover{_x000D_
width:490px;_x000D_
height:490px;_x000D_
}_x000D_
.inner{_x000D_
border:1px solid red;_x000D_
position:relative;_x000D_
width:100%;_x000D_
height:100%;_x000D_
top:0px;_x000D_
left:0px;_x000D_
display:none; _x000D_
color:white;_x000D_
font-size:xx-large;_x000D_
z-index:10;_x000D_
}_x000D_
.box:hover > .inner{_x000D_
display:inline-block;_x000D_
}_x000D_
.notext{_x000D_
height:30px;_x000D_
width:30px;_x000D_
border:1px solid blue;_x000D_
position:absolute;_x000D_
top:0px;_x000D_
left:0px;_x000D_
width:100%;_x000D_
height:100%;_x000D_
display:none;_x000D_
}_x000D_
.box:hover > .notext{_x000D_
background-color:black;_x000D_
opacity:0.5;_x000D_
display:inline-block;_x000D_
}
_x000D_
<div class="box">_x000D_
<div class="inner">_x000D_
<p>Panda!</p>_x000D_
</div>_x000D_
<div class="notext"></div>_x000D_
</div>
_x000D_
Hope this helps! :) Any suggestions are welcome.
Quick answer without seeing examples of your current HTML and CSS is to use z-index
css:
#div1 {
position: relative;
z-index: 1;
}
#div2 {
position: relative;
z-index: 2;
}
Where div2 is the overlay
I'm late to the party, but if you want to do this to an arbitrary element using only CSS, without messing around with positioning, overlay divs etc., you can use an inset box shadow:
box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
This will work on any element smaller than 4000 pixels long or wide.
example: http://jsfiddle.net/jTwPc/
I would suggest using css attributes to do this. You can use position:absolute to position an element on top of another.
For example:
<div id="container">
<div id="on-top">Top!</div>
<div id="on-bottom">Bottom!</div>
</div>
and css
#container {position:relative;}
#on-top {position:absolute; z-index:5;}
#on-bottom {position:absolute; z-index:4;}
I would take a look at this for advice: http://www.w3schools.com/cssref/pr_class_position.asp
And finally here is a jsfiddle to show you my example
Source: Stackoverflow.com