← All elements
<p class="bl" tabindex="0">The launch code is <b>7-4-1-9</b>. Hover to read.</p>About this hover effect
Hidden text blurred out by default and revealed on hover or focus using filter: blur() and a smooth transition.
How it works
The text block has filter: blur(6px) by default, which makes it unreadable, and a transition on the filter. On :hover and :focus the blur is set to zero, so the text sharpens. The block has tabindex 0 so keyboard users can focus it and reveal it as well.
Ways to customise it
- Change 6px to a bigger value to hide the text more.
- Edit the colours of the text and its highlight.
- Change the 0.35s transition.
Good to know
This hides content from sight, not from assistive technology, so do not use it to protect secrets. Touch users have no hover, but tapping gives the element focus and reveals it.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.