I am aiming to create a div with a customizable background, and then utilize a pseudo element to generate a semi-transparent white overlay that will lighten the background of the div. The crucial requirement is for the "overlay" to appear beneath the contents of the div. Consider the scenario below:
<div class="container">
<div class="content">
<h1>Greetings, Universe</h1>
</div>
</div>
.container {
background-color: green;
width: 600px;
height: 400px;
position: relative;
}
.content {
background-color: yellow;
width: 300px;
}
.container::before {
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, .7);
}
The .content div should remain visible above the white overlay created by .container::before.
It would be preferable not to rely on using z-index for .content, but it can be utilized if deemed necessary.
Objective: The green background must be concealed while keeping the text and yellow background unaffected.
Access the JS fiddle example here: http://jsfiddle.net/1c5j9n4x/