Yes it is possible to click through a div to underlying elements using only css. I’ve seen this question asked so many times online and so often the answer given is that you require javascript, or even sometimes whole libraries to accomplish this task.

Let me introduce you to the pointer-events CSS property. This property allows you to control under what situations an SVG target element should become the target of mouse events. As an experimental feature in CSS3 it has also added basic support for non-SVG elements in modern browsers (Chrome 2, FireFox 3.6, Safari, 4).

div.overlay {
    pointer-events: none;
}

Will now pass all click events on the overlay div through to the underlying elements. To get the same functionality in IE 5.5 and up we can use the AlphaImageLoader filter in an IE conditional.

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

Or in IE8 and up outside of a conditional.

div.overlay {
    -ms-filter: 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=overlay.png,  sizingMethod=scale)';
    background: none !important;
}

Having issues implementing this? Mention me @fromanegg or leave a comment below. Until next time!