The Problem

All I wanted was a div that could hide text and slide out of the way when hovered over. Stack Overflow yielded… disappointing results when I searched for a solution. Some people had thought of transitioning width between some value and auto, but quickly figured out that no browser can successfully do this. Here’s what I came up with.

A Solution

See the Pen Text Reveal by Steven Traversi (@straversi) on CodePen.

The concept is focused around a span containing the text in question. A ::before pseudo element is added to have the width of the span. On hover, the pseudo element is translated right 100%. The left and right attributes can be used, but they’re more expensive to animate.

Of course, taking advantage of CSS’s :hover means we can’t use this method for mobile devices. Therefore, this solution is not super practical. Oh well.

If you’re on mobile now, here’s a video of the sweet action.