Darken Background - Without affecting elements itself. (Overlay?)

Question

I want to darken my background. Normally, its as simple as putting an overlay with a lower z-index than the most front element like seen here:

_{(source: jankoatwarpspeed.com )}

What I want to achieve now is to make the elements behind the overlay STILL be clickable, selectable and so on.

In this example, the links should be clickable, and the text above should be selectable, but STILL be this dark.

I guess I cant archive this with pure CSS, what would be your solution?

Thanks

Answer 1

Just disable pointer events on your overlay:

pointer-events: none;

Example:

http://codepen.io/anon/pen/ebcdz

Answer 2

See this fiddle.My technique is to add the same elements to the overlay div and to set the color of text of the href text to the background color of overlay so that it appears invisible.See this fiddle.

http://jsfiddle.net/5Ux5t/1/

CSS for href within overlay div to make it invisible

#overlay a{
    color:black;
}

Actually there are links in the overlay too.I just added the above CSS to make them invisible.See this:

http://jsfiddle.net/5Ux5t/