Using CSS Transition Opacity for Fade-In and Fade-Out Fade Effects, Problems and Workarounds

The CSS opacity transition is often used to create fade-in and fade-out effects. Although this works great on the first glance, it can also be the cause of some hard to find bugs with mouse events.

Basic idea is to reduce an elements opacity from 1 (meaning fully opaque) to 0 (meaning fully transparent) in order to fade-out the element. And indeed an element with opacity : 0 appears just as invisible as an element with visibility : hidden. However, it behaves differently. An element with opacity : 0 still receives events and so e.g. reacts when the user clicks on its links. On the other hand links covered by an fully transparent element do not work, although completely visible.

The following first example illustrates this.

The second example now shows the problem with this technique: Here you see an ordinary link, which however has the problem that it does not react when clicked. (If you think this example is a bit constructed, there is a more realistic but also more complex example below.)

The problem is that the element c1 covers the link. It is invisible because of the opacity:0 but it still receives mouse clicks. So these mouse clicks do not get to the link itself and consequently the link does not work. By adding a background color and using opacity:0.5 it immediately becomes clear what is happening:

More Realistic Example: Pop-Up Menu

The following shows a more realistic example of a pop-up menu. When you hover the mouse over the menu button, a menu appears. The menu is faded-in and -out using an opacity transition. You will notice that the link below the menu button is not working. This is caused my the menu, which is there (although fully transparent due to opacity:0 and hence invisible) and receives the mouse clicks intended for the link.

Workaround: Combinig CSS Transition Opacity and Visibility

The idea to solve this problem is to use both transitions on the opacity and on the visibility property. The opacity transition for the visual fade-in and fade-out effect and the visibility for hiding the element for mouse clicks as well.

Note, however, that while the fade visual effect is running, the menu element must be visible, because otherwise the effect would not be visible. So on a fade-in the element must become visible immediately while on a fade-out it must become visible only after the opacity transition terminated. Exactly this behaviour is specified using transition:visibility 1s . For a detailed description on css transition visibility and how to combine it with visual effects like opacity and others see the CSS Transition Visibility article.

Conclusion

Using css transition on opacity alone to fade out an element leads to the problem that links on the faded element stay active while links on elements covered by the faded element do not work. We gave examples for this behaviour and a workaround using both css transition opacity and css transition visibility.

WebGL™ is a trademark of the Khronos Group Inc.