I'm struggling to make this render right in my browser (Chrome). I have a wrapper holding all the elements of the HTML, and I want to have a DIV (lets call it div-1) that hold a image, and has a overlay div on top of it to the left, like I sketched in this picture...any quick solutions?
5 Answers
Here's a pure CSS solution, similar to DarkBee's answer, but without the need for an extra .wrapper
div:
.dimmed {
position: relative;
}
.dimmed:after {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
I'm using rgba here, but of course you can use other transparency methods if you like.
-
@marcvangend the solution works but if there is a scrollable div instead of the image can we still allow the scroll to work?– OnkarCommented May 28, 2014 at 5:47
-
3@Onkar You can try adding
pointer-events: none;
to the.dimmed:after
selector. See also stackoverflow.com/questions/1009753/…. Please let us know if it works in this specific use case. Commented May 29, 2014 at 12:28 -
6Fantastic. If you want to click through to the underlying element, add the rule pointer-events: none; to the after element css rules Commented Nov 6, 2016 at 15:02
Using CSS3 you don't need to make your own image with the transparency.
Just have a div with the following
position:absolute;
left:0;
background: rgba(255,255,255,.5);
The last parameter in background (.5) is the level of transparency (a higher number is more opaque).
.foo {
position : relative;
}
.foo .wrapper {
background-image : url('semi-trans.png');
z-index : 10;
position : absolute;
top : 0;
left : 0;
}
<div class="foo">
<img src="example.png" />
<div class="wrapper"> </div>
</div>
-
1Might want to add
top:0; left: 0;
to the.wrapper
Commented Jul 25, 2013 at 13:56 -
-
1Also, if the image isn't already transparent,
opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */
Commented Jul 25, 2013 at 13:58 -
1PS - is using rgba not advisable, I see you went with transparent png...this is due to internet explorer, right?– TM23Commented Jul 25, 2013 at 13:58
-
For a div-Element you could just set the opacity via a class to enable or disable the effect.
.mute-all {
opacity: 0.4;
}
Like the answer previous, but I'd put ::before, just for stacking purposes. If you want to include text over the overlay (a common use case), using ::before will should fix that.
.dimmed {
position: relative;
}
.dimmed:before {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}