Basic CSS - how to overlay a DIV with semi-transparent DIV on top

Question

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?

Answer 1

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.

Answer 2

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

Example Fiddle