Transparent foreground

Question

I would like to add a semi-transparent uniform layer as a foreground for a div element. What is the best way to do that?

Answer 1

You could use this CSS...

div.parent {
   position: relative;
}

/* this div is a descendent of the div above */
div.child {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: .6;
   background: #fff;
} 

jsFiddle.

If you want mouse events to go through this cover, add pointer-events: none to the div.child.

You tagged it jQuery, so to add this child element via jQuery...

$('div.parent').append('<div class="child" />');