Shape Clip Reveal
Au survol, la face cachée d'une carte s'ouvre dans un cercle qui naît toujours en son centre. Clavier, tap et votre propre contenu (texte ou image) compris.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Une carte .shc-card empile deux faces de même taille : .shc-front, visible au repos, et .shc-back, la face à révéler. Chacune accepte n'importe quel contenu : un titre, une liste, un prix, un bouton. Un <img>, un <svg> ou une <video> qui porte la classe .shc-media remplit toute sa face (object-fit: cover) et le reste du contenu s'affiche par-dessus.
La face cachée est découpée par clip-path: circle(0 at 50% 50%), un disque de rayon nul posé au milieu de la carte. Au survol, le rayon monte à 100 % en 0,5 s avec la courbe cubic-bezier(.4,0,.2,1) : le disque grandit depuis le centre, quel que soit le bord par lequel arrive la souris, et finit par couvrir les coins. Quand la souris repart, il se resserre vers ce même centre. Si vous voulez que le cercle parte du pointeur, c'est l'effet Circular Reveal.
Le survol n'est pris en compte que sur les appareils qui survolent vraiment (@media (hover: hover)), ce qui évite l'état « survolé » qui reste collé après un tap. Sur écran tactile, un script de quelques lignes bascule la classe .shc-open : un tap ouvre, le tap suivant referme. Un lien ou un bouton touché à l'intérieur de la carte garde son action normale. La même ouverture se déclenche au focus clavier de la carte (:focus-visible) ou d'un élément focusable placé dedans (:has(:focus-visible)).
Le script prend toutes les .shc-card présentes dans une .fx-0620-root au chargement : vous pouvez mettre une grille entière de cartes dans une seule racine, ou plusieurs copies de l'effet dans la page, chacune reste indépendante. Rien n'est ajouté sur window.
Accessibilité
- Clavier : la carte de démonstration porte
tabindex="0"; au Tab, elle s'ouvre comme au survol et affiche un contour#a5b4fc. Si votre carte est déjà un<a>ou un<button>, retireztabindex: elle est focusable d'office. - Lecteurs d'écran :
clip-pathmasque à l'œil mais ne retire rien de la page. Le texte de la face cachée est lu à la suite de la face visible. Quand la face cachée ne fait que répéter la face visible, ajoutezaria-hidden="true"sur.shc-back. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition est supprimée. La face cachée apparaît d'un coup, entière et lisible, au survol, au focus ou au tap. - Toucher : un tap ouvre, un second tap referme ; plus de carte qui reste ouverte faute de pouvoir « quitter » le survol avec le doigt.
- Contraste : réglez
--shc-back-colorpour qu'il reste lisible sur--shc-back(blanc sur le dégradé indigo-fuchsia par défaut).
Compatibilité navigateur
Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies indépendantes (la 2e réagit seule), ouverture au survol, au Tab et au tap (le 2e tap referme), état final immédiat en mouvement réduit, rien qui déborde à 390 px. Les versions minimales viennent de :focus-visible et de :has() (focus d'un lien placé dans la carte).
Plus ancien : le survol et le tap marchent dans les versions plus anciennes qui ont la propriété inset (Chrome 87, Firefox 66, Safari 14.1 : versions où arrive la propriété inset qui superpose les faces) ; seul le focus clavier n'ouvre plus la carte. Sans JavaScript, tout fonctionne sauf le tap sur écran tactile.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0620-root">
<div class="shc-card" tabindex="0">
<span class="shc-front">Survolez-moi</span>
<div class="shc-back">
<span>Révélé !</span>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
--shc-w |
280px |
Largeur de la carte (jamais plus large que son conteneur). Mettez 100% pour une grande image. |
--shc-h |
180px |
Hauteur de la carte ; les deux faces la prennent entièrement. |
--shc-radius |
1rem |
Arrondi des coins (25px sur un bouton de 50px de haut donne une pilule). |
--shc-front et --shc-front-color |
linear-gradient(135deg,#1a1a2e,#16213e) et #a1a1aa |
Fond et couleur du texte de la face visible. |
--shc-back et --shc-back-color |
linear-gradient(135deg,#6366f1,#d946ef) et #fff |
Fond et couleur du texte de la face révélée. |
--shc-speed |
.5s |
Durée d'ouverture et de fermeture du cercle. |
--shc-bg et --shc-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine : passez-les à transparent et 0 pour poser la carte dans votre page. |
Classe .shc-open |
absente | Ouvre la carte sans survol : le script la bascule au tap ; ajoutez-la vous-même pour ouvrir une carte par programme. |
Classe .shc-media |
— | À poser sur une image, un SVG ou une vidéo dans une face : le média la couvre entièrement, le texte reste au-dessus. |
FAQ
<img class="shc-media" src="apres.jpg" alt="…"> dans .shc-back (et une autre dans .shc-front si la face visible est aussi une photo). Le média couvre la face avec object-fit: cover ; un titre ajouté après lui reste lisible par-dessus.at 50% 50% dans les règles clip-path (par exemple at 0 100% pour le coin bas-gauche).shc-open : carte.classList.add('shc-open'), et retirez-la pour refermer. C'est la même classe que celle posée au tap sur écran tactile, donc le rendu est identique.
