A pure CSS3 driven overlay
During my last workshop with Gabriele Lana I’ve started a nice conversation with Fabio Fabbrucci on how to recreate the perfect overlay effect using as less JavaScript as possible.
The problem when dealing with this kind of effect is that you can’t just do a transition over the opacity because, even if completely transparent, the overlay is still hovering the page and thus blocking every mouse interaction.
A nice trick I discovered is using pointer-events:none to workaround the problem: the results are pretty impressive although the demo works only on the latest browsers.
I’ve created a demo on CodePen, it work on IE11, Chrome, Firefox and Safari6+: http://codepen.io/sandropaganotti/pen/wIAat