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 :)

Answer 1

one simple trick i have found, althoug not very w3c, is to encapsulate the div into a span and use that span class to make the overlay. That way the whole thing will be clickable , and the div will behave like a div