Blur Reveal
A 3 px CSS blur dissolves and the element scales up slightly (1.05) over 0.4s on hover — progressive reveal, pure CSS.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Hover has 48 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .fx-0350-root wrapper centres a 200 px button. At rest, filter: blur(3px) blurs the whole element (text and background). On hover, filter: blur(0) and transform: scale(1.05) apply over 0.4 s: the content becomes sharp and the element grows slightly. The initial blur obscures the content without fully hiding it — the element can be guessed. The 5% scale reinforces the sensation of approach, like a camera lens finding focus.
:focus-visible triggers the same sharp + scaled state. Under reduced motion, the resting blur is removed (filter: none) and the transform is suppressed on hover — the element is always readable at rest and no motion is produced.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, the resting blur is removed statically (filter: none) and thetransformis suppressed on hover. The element is always readable. No motion is produced. - Blurred content accessibility: blur makes content hard to read at rest — intentional for a 'reveal' effect. Ensure the element is reachable by keyboard (via Tab) so users without a mouse can read the content.
- Keyboard: the element is a natively focusable
<button>.:focus-visibletriggers the reveal (blur(0) + scale) and adds a 2 px outline. - Touch: on touchscreens, blurred content may be hard to tap without seeing what it represents. Consider adding a visible label below the blurred element to guide the user.
Browser compatibility
Pure CSS. Properties: filter: blur(), transform: scale, transition, :focus-visible. Verified in Chromium and Firefox: blur and reveal visible, two independent copies, 0 errors. filter creates a new stacking context and may affect children with position: fixed.
Without :focus-visible (before 2021), keyboard focus does not trigger the reveal. The element remains blurred at rest for keyboard users.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0350-root">
<button class="blr-box blr-reveal" type="button">
<span>Your text</span>
</button>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Resting blur level (CSS — blur(3px)) |
3 px | 1 px is barely noticeable; 6 px effectively masks content. Above 10 px, the blur may slightly overflow outside the element (browser-dependent). |
Scale factor (CSS — scale(1.05)) |
1.05 (5%) | 0 removes the scale; 1.1 is more pronounced. The scale may overflow the parent — add overflow: hidden on the parent. |
Duration (CSS — 0.4s) |
0.4 s | 0.2 s is faster; 0.6 s is slower and more dramatic. |
| What to blur (HTML) | entire button | To blur only the image and not the text, apply filter: blur() to the image alone (a child element) and animate it independently. |
FAQ
overflow: hidden on the immediate parent element. On some browsers, isolation: isolate on the element itself may also contain the overflow.blur() to 15–20 px. The content will be visually masked but remains in the DOM — screen readers still read it. For semantic masking, combine with aria-hidden='true' at rest and remove the attribute on hover via JavaScript.
