Shutter Reveal
Un voile coloré (dégradé indigo-violet) recouvre l'élément au repos ; au survol il s'efface en 500 ms et révèle le texte sur fond sombre. Aucun JavaScript, deux pseudo-éléments.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0353-root centre un bloc .hover-box.hover-shutter de 200 × 200 px sur fond #0a0a0f. L'élément principal a un fond sombre var(--bg-card). Un pseudo-élément ::before positionné en inset: 0 recouvre l'élément d'un dégradé linear-gradient(135deg, #6366f1, #d946ef) avec opacity: 1 au repos.
Au survol (ou au focus), deux transitions jouent simultanément : le ::before passe de opacity: 1 à opacity: 0 en 500 ms, révélant le fond sombre de l'élément ; le span passe de opacity: 0 à opacity: 1 avec un délai de 200 ms pour apparaître après le début de la disparition du voile. Le texte a un z-index: 1 supérieur au pseudo-élément (z-index: 0).
Mesuré dans Chromium 151 : voile visible au repos, texte visible au survol, deux copies sur la même page fonctionnent indépendamment. L'effet est une disparition par opacité — aucun clip-path, aucun volet réel.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, toutes les transitions sont annulées ; le voile reste en place au survol et le texte ne s'anime pas. Le changement d'état est absent sous mouvement réduit — pour un usage critique (bouton d'action), prévoir un texte alternatif visible au repos. - Clavier : l’élément est un
<button>nativement focusable. La règle:focus-visibledéclenche le même effet qu’au survol (voile disparaît, texte visible), avec un contour indigo. - Contenu caché au repos : le texte sous le voile est dans le DOM et lisible par les lecteurs d'écran même s'il est invisible à l'œil. Ne pas mettre dans le
spanune information indispensable sans alternative. - Toucher : sur mobile, le premier toucher déclenche le survol CSS et révèle le texte.
Compatibilité navigateur
CSS pur (opacity, linear-gradient, ::before, transition, :focus-visible, prefers-reduced-motion), aucun JavaScript. Mesuré dans Chromium 151 : voile, révélation, deux copies indépendantes. Fonctionne dans tous les navigateurs modernes.
Sans opacity (navigateurs très anciens), le voile reste toujours visible et le texte n'apparaît jamais. Sans transition, le changement est instantané mais fonctionnel.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0353-root">
<button class="hover-box hover-shutter" type="button">
<span>…</span>
</button>
</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 |
|---|---|---|
Couleur du voile (CSS — background du ::before) |
linear-gradient(135deg, #6366f1, #d946ef) |
Remplacez le dégradé par une couleur unie (#10b981) ou un autre dégradé. La couleur du voile peut coder une catégorie (vert = finance, bleu = tech). |
Durée du fondu (CSS — transition: opacity .5s) |
500 ms | .3s rend la révélation plus vive, .8s la rend plus dramatique. Le délai du span (transition: opacity .3s .2s) maintient le texte caché pendant le début du fondu. |
Délai d'apparition du texte (CSS — deuxième valeur de transition sur span) |
200 ms | .4s retarde davantage l'apparition du texte, créant un effet en deux temps ; 0s fait apparaître le texte en même temps que le voile disparaît. |
Fond de l'élément (CSS — background de .hover-shutter) |
var(--bg-card) (sombre) |
Un fond blanc (#fff) révèle le texte sombre sur fond blanc au lieu de fond sombre — inversez aussi la couleur du texte du span. |
Forme de l'élément (CSS — border-radius) |
var(--radius-xl) = 1 rem |
50% pour une révélation sur un élément circulaire (avatar, badge) ; 0 pour un rectangle franc. |
FAQ
span est dans le DOM avec opacity: 0, pas display: none : les lecteurs d'écran le lisent. Si l'information du texte est critique, prévoyez également un texte visible au repos dans l'élément.background-image sur .hover-shutter ou imbriquez un ![]()
z-index: 0. Vérifiez que le ::before (z-index 0) reste devant l'image (z-index −1).
