Transparent foreground

Question

I would like to add a translucent uniform layer as the foreground for the element div. What is the best way to do this?

Answer 1

You can 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: noneto div.child.

You marked it with jQuery, so add this child via jQuery ...

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