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

Yes, its possible

Use pointer-events: none along with conditional statements of CSS for IE11 (as it does not work in IE10 or below), you can get a cross browser compatible solution to achieve this.

Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks propagate through to elements lying bellow.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 conditional:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Here is a basic example page with all the code.