Back to Blog

Designing Better Show/Hide Interactions


Crafting delightful user experiences on the Web allows for a great amount of experimentation and variety in how best to present content to end users. Many UI patterns are constantly re­imagined to make the best use of available screen real estate on a per­project basis. These re­imaginations result in the emergence of popular new patterns that the design and development community latch onto. However, the communities may not realize additional exploration of usability should be done to make sure a pattern is truly usable for all.

Recently I took a hard look at a pattern I had seen a lot of: revealing hidden content when hovering over elements. Specifically, revealing titles, descriptions, and at times interactive elements relating to images.

You can read my tutorial on revealing captions for everyone, where I describe the necessary code and call out various accessibility considerations for implementation.

Author Scott O'Hara

As a designer and developer, Scott loves pushing the limits of CSS, designing usable, accessible experiences for all, and teaching and writing about UX development.

More posts from this author

How we work Process

Product Hero Talin Wadsworth