Pixel Dissolve
A coloured cover breaks into square blocks that vanish one by one on hover, focus or tap, revealing what lies beneath; it then puts itself back together.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Distortion has 31 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .dsv-zone stacks its children in the same spot (a one-cell CSS grid). The last one, .dsv-cover, sits on top: it is the purple, pink and orange gradient cover with its text. Anything you place before it in the zone (an answer, a photo, a price) waits underneath.
The script cuts the cover into blocks of about 16 px (data-dsv-block) and shuffles their order of disappearance. When the effect switches on, an SVG mask generated on the fly (mask-image) removes the blocks one by one over 800 ms (data-dsv-out); when it switches off, they come back in reverse order in 500 ms (data-dsv-in). Once every block is gone, the cover is set to visibility: hidden.
Each animation frame is capped at 50 ms and nothing runs at rest. A ResizeObserver recomputes the block grid if the cover changes size. The cover can hold text, an image or a gradient: the mask applies to all of its content.
Accessibility
- Keyboard: the zone has
tabindex="0"and an outline (--dsv-ring); keyboard focus dissolves the cover like hover does, and the cover returns when focus moves away. - Touch: one tap dissolves the cover, a second tap rebuilds it (measured in Chromium, Firefox and WebKit with an emulated touch screen).
- Screen readers: the hidden content is in the page from the start and is read, like the cover's text while it is visible. Don't use it to hide an answer from screen readers; write cover text that says what it covers.
- Reduced motion: with
prefers-reduced-motion: reduce, the cover disappears and reappears at once, without the block-by-block dissolve; the content stays reachable the same way. - No flashing: each block disappears only once per pass, with no rapid change of brightness.
Browser compatibility
CSS and 3.6 KB of JavaScript, no dependency. Measured in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: 0 errors, two independent copies, hover, Tab, touch, 390 px and reduced motion. The mask is set as both mask-image and -webkit-mask-image: the prefixed version has long existed in Chrome and Safari (unprefixed versions per @mdn/browser-compat-data: Chrome 120, Firefox 53, Safari 15.4). The floor comes from Pointer Events (Safari 13) and ResizeObserver (Chrome 64, Firefox 69, Safari 13.1).
Without CSS masks, the blocks don't show: the cover stays whole during the animation, then vanishes at once at the end. Without :focus-visible (before Safari 15.4), a mouse click in the zone also dissolves the cover. Without JavaScript, the cover stays in place.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0274-root" data-dsv-block="16" data-dsv-out="800" data-dsv-in="500">
<div class="dsv-zone" tabindex="0">
<div class="dsv-cover">HOVER ME</div>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
data-dsv-block (on the root) |
16 |
Target block size in pixels (4 minimum); the grid adjusts to fit the cover's width and height exactly. |
data-dsv-out and data-dsv-in |
800 and 500 |
Durations in milliseconds of the dissolve and of the blocks' return; 0 for an instant switch. |
| Revealed content | None (the zone only holds the cover) | Place your content inside .dsv-zone, before .dsv-cover: it takes the same cell and shows under the departing blocks. |
--dsv-w and --dsv-h |
200px and 120px |
Zone size; --dsv-w: 100% to follow the container, --dsv-h: auto to take the content's height. |
--dsv-cover and --dsv-cover-color |
gradient #6366f1 → #ec4899 → #f59e0b, and #ec4899 |
Cover background (image or gradient) and the plain colour beneath it. For a plain cover, give both the same colour. |
--dsv-text and --dsv-font |
#fff and 16px |
Colour and size of the cover's text. |
--dsv-radius and --dsv-ring |
12px and #ec4899 |
Corner rounding of the zone and cover, outline colour on keyboard focus. |
--dsv-bg and --dsv-min-h |
#0a0a0f and 300px |
Root background and minimum height; transparent and 0 to drop it into your page. |
FAQ
.dsv-cover's content leaves with the blocks, whether text, an <img> or a --dsv-cover: url(…) background. The mask cuts whatever is displayed.
