Shape Clip Reveal
On hover, a card's hidden face opens in a circle that always starts from its centre. Keyboard, tap and your own content (text or image) included.
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
A .shc-card stacks two faces of the same size: .shc-front, shown at rest, and .shc-back, the face to reveal. Each one takes any content: a heading, a list, a price, a button. An <img>, <svg> or <video> with the .shc-media class fills its whole face (object-fit: cover) and the rest of the content sits on top.
The hidden face is cut by clip-path: circle(0 at 50% 50%), a zero-radius disc placed in the middle of the card. On hover the radius rises to 100% in 0.5 s with the cubic-bezier(.4,0,.2,1) curve: the disc grows from the centre, whichever edge the mouse comes from, until it covers the corners. When the mouse leaves, it shrinks back to that same centre. If you want the circle to start from the pointer, use the Circular Reveal effect.
Hover only applies on devices that really hover (@media (hover: hover)), which avoids the stuck hover state after a tap. On touch screens, a few lines of script toggle the .shc-open class: one tap opens, the next tap closes. A link or button tapped inside the card keeps its normal action. The same opening happens when the card gets keyboard focus (:focus-visible) or when a focusable element inside it does (:has(:focus-visible)).
The script picks up every .shc-card inside a .fx-0620-root on load: put a whole grid of cards in a single root, or several copies of the effect on the page, each one stays independent. Nothing is added to window.
Accessibility
- Keyboard: the demo card has
tabindex="0"; on Tab it opens just like on hover and shows a#a5b4fcoutline. If your card is already an<a>or a<button>, droptabindex: it is focusable already. - Screen readers:
clip-pathhides from the eye but removes nothing from the page. The hidden face's text is read after the visible one. When the hidden face only repeats the visible face, addaria-hidden="true"to.shc-back. - Reduced motion: under
prefers-reduced-motion: reducethe transition is removed. The hidden face appears at once, whole and readable, on hover, focus or tap. - Touch: one tap opens, a second tap closes; no more card stuck open because a finger cannot “leave” a hover.
- Contrast: set
--shc-back-colorso it stays readable on--shc-back(white on the default indigo-fuchsia gradient).
Browser compatibility
Measured in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: 0 errors, two independent copies (the 2nd reacts on its own), opens on hover, Tab and tap (2nd tap closes), final state shown at once with reduced motion, nothing overflowing at 390 px. Minimum versions come from :focus-visible and :has() (focus on a link inside the card).
Older browsers: hover and tap 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); only keyboard focus no longer opens the card. Without JavaScript everything works except tapping on touch screens.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0620-root">
<div class="shc-card" tabindex="0">
<span class="shc-front">Hover me</span>
<div class="shc-back">
<span>Revealed!</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 |
|---|---|---|
--shc-w |
280px |
Card width (never wider than its container). Use 100% for a large picture. |
--shc-h |
180px |
Card height; both faces fill it. |
--shc-radius |
1rem |
Corner rounding (25px on a 50px-tall button gives a pill). |
--shc-front and --shc-front-color |
linear-gradient(135deg,#1a1a2e,#16213e) and #a1a1aa |
Background and text colour of the visible face. |
--shc-back and --shc-back-color |
linear-gradient(135deg,#6366f1,#d946ef) and #fff |
Background and text colour of the revealed face. |
--shc-speed |
.5s |
How long the circle takes to open and close. |
--shc-bg and --shc-min-h |
#0a0a0f and 300px |
Root background and minimum height: set them to transparent and 0 to drop the card into your page. |
.shc-open class |
absent | Opens the card without hover: the script toggles it on tap; add it yourself to open a card from code. |
.shc-media class |
— | Put it on an image, SVG or video inside a face: the media covers the face, text stays on top. |
FAQ
<img class="shc-media" src="after.jpg" alt="…"> inside .shc-back (and another one in .shc-front if the visible face is a photo too). The media covers the face with object-fit: cover; a heading added after it stays readable on top.at 50% 50% in the clip-path rules (for instance at 0 100% for the bottom-left corner).shc-open class: card.classList.add('shc-open'), and remove it to close. It is the same class the touch tap sets, so the result looks identical.
