Make overlapping div "not clickable" so that content below can be accessed?

Question

I am using a JPG overlay with a reduced opacity for an effect, however I want it as an effect only and make the content below that div clickable. Is that possible, thanks :)))

Thanks for your comments everyone. I guess I'll have to think of something else because the JPEG covers the whole page :)

Answer 1

Well there is pointer-events:none; but only few browsers modern browsers (and IE11) support it.

https://developer.mozilla.org/en/CSS/pointer-events