Split Reveal
Two panels that fold back to the edges and uncover the content in the middle: on hover, on focus, on tap, or when your script says so.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. SVG has 30 effects, including 3 free. Explore the category →
3 usage examples
How it works
The .spr-card holds three layers: .spr-center, the content to uncover, then two panels, .spr-left and .spr-right, each covering one half. The panels are cut by clip-path: polygon(…). On opening, the left panel shrinks towards the left edge and the right one towards the right edge, in 0.5 s with the cubic-bezier(.4,0,.2,1) curve: the centre appears as if between two doors. The panels don't slide, they fold back; their content is cropped in place.
Every layer takes your content. An image or SVG with the .spr-media class fills .spr-center. Inside the panels, the same class makes the image twice as wide as the panel, anchored left in the left panel and right in the right panel: put the same image in both and it looks like one piece at rest, then splits in two when opening.
Triggers: hover (only on devices that hover, @media (hover: hover)), keyboard focus on the card or an element inside it, and the .spr-open class. On touch screens a tap toggles it (opens, then closes on the next tap); a link or button tapped inside the card keeps its action. Add .spr-manual to the card to switch off hover, focus and tap: it then only opens when your script sets .spr-open, for instance after an answer has been checked.
Accessibility
- Keyboard: the demo card (
tabindex="0") opens on Tab with a#c4b5fdoutline. On a<button>or<a>, droptabindex. A.spr-manualcard does not need to be focusable: the button that sets the class is. - Screen readers: the centre content is always in the page and read, even with the panels closed. Decorative panels (or panels repeating an image) get
aria-hidden="true". For a quiz answer, announce the result in anaria-liveregion of your page: the panels opening cannot be heard. - Reduced motion: under
prefers-reduced-motion: reducethe panels vanish at once and the centre shows whole, with no animation. - Touch: one tap opens, a second one closes; hover no longer gets “stuck” after a tap.
Browser compatibility
Measured in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: 0 errors, two independent copies, opens on hover, Tab and tap (2nd tap closes, also when the code is pasted twice), final state at once with reduced motion, nothing overflowing at 390 px. Minimum versions come from :focus-visible and :has().
Older browsers: hover, tap and the .spr-open class work in older versions that have the inset property (Chrome 87, Firefox 66, Safari 14.1: the versions that brought the inset property used to stack the faces); keyboard focus no longer opens the card. Without JavaScript only the tap is missing.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0626-root">
<div class="spr-card" tabindex="0">
<span class="spr-center">CENTER</span>
<div class="spr-left">
<span>LEFT</span>
</div>
<div class="spr-right">
<span>RIGHT</span>
</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 |
|---|---|---|
--spr-w |
280px |
Card width, capped by its container. |
--spr-h |
180px |
Card height. |
--spr-radius |
1rem |
Corner rounding. |
--spr-center and --spr-center-color |
#1a1a24 and #fff |
Background and text of the uncovered content. |
--spr-left |
linear-gradient(135deg,#6366f1,#8b5cf6) |
Left panel background (colour, gradient, pattern). |
--spr-right |
linear-gradient(135deg,#d946ef,#f43f5e) |
Right panel background. Give it the same value as the left one for a single colour split down the middle. |
--spr-speed |
.5s |
Opening and closing time. |
--spr-bg and --spr-min-h |
#0a0a0f and 300px |
Root background and minimum height (transparent and 0 inside a page). |
.spr-open and .spr-manual classes |
absent | .spr-open opens the card (set on tap, or by your script). .spr-manual leaves opening to your script alone. |
FAQ
<img class="spr-media" src="cover.jpg" alt=""> inside .spr-left and inside .spr-right. It becomes twice the panel's width, anchored on the right side: at rest you see a single photo; when opening, each half goes its own way. Leave the alt text empty on these copies (and aria-hidden on the panels).spr-manual to the card so it ignores hover and focus, then in your click handler: card.classList.add('spr-open'). Remove the class to close.height: 50%) and make their polygons fold upwards and downwards.
