Please step back

When I recently created a new element for an iPhone App I came across a common problem. The goal was to add an inset shadow that covers the whole element including the containing image which touches the outer edges. Therefore I couldn’t apply it to the element itself but had to make an overlay using a pseudo-element. Unfortunately this topmost layer covered not only the element but also its underlying linking resulting in an unclickable element.


The element, fully clickable.

The shadow to overlay the element.

The element with the overlayed shadow, applied through a pseudo-elemtent. It’s not clickable anymore.

First I didn’t exactly know what to do and experimented with the z-index of the involved layers, which didn’t result in the desired outcome. But then I remembered a not so well known CSS property called pointer-events. When set to none it enables to make elements “translucent” for mouse events (i.e. a click), which then are passed through to the underlying content. The perfect property to solve my problem!

The default value for pointer-events is auto, that means it reacts to a mouse event as usual, which also correspondents to the standard behavior of any HTML element. The support is pretty good and besides the usual suspects – namely the IE family – only Opera isn’t capable of it. But since I was lucky enough to develop for an iPhone App I didn’t have to worry.

In the following I’ve provided an example to illustrate the behavior.

Example

By default the layer with the semitransparent image covers the underlying element and thus only the uncovered part can be clicked.
After pointer-events: none is applied to the overlay it becomes “translucent” for mouse events and the whole element is clickable.

Reference: Image by lorempixel, overlay pattern by Subtle Patterns.

  • Mark Rivera

    Wow… i’ve been looking for this and wow… sir you are so genius!
    Thanks for this simple solution… :)