0

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

12
  • 1
    background: rgba(0,0,0, 0.3); Jan 6, 2014 at 12:33
  • 2
    Cant you just use css to change the background colour?
    – man
    Jan 6, 2014 at 12:33
  • Why use overlay for that?That can be easily done by changing background color.
    – Zword
    Jan 6, 2014 at 12:34
  • jsfiddle.net/Qq5tQ/232 Jan 6, 2014 at 12:34
  • 1
    Have a light stylesheet and dark stylesheet, then assign a click function using jQuery to switch between the two.
    – Xareyo
    Jan 6, 2014 at 12:37

2 Answers 2

0

Just disable pointer events on your overlay:

pointer-events: none;

Example:

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

3
  • Does disabling pointer events cause the elements behind the overlay to be clickable? Because that's what the OP is asking for... Sep 10, 2019 at 19:13
  • Yes, it basically causes the overlay to passthrough the event, as you can see in the codepen example Sep 13, 2019 at 13:10
  • Well, I (and I'm sure others) are blocked from CodePen at work. That's one of the reasons Stack Overflow came up with Stack Snippets, which work within the domains owned by Stack Overflow... But I just noticed that this is a really old question and answer, so never mind :). Sep 13, 2019 at 13:16
0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.