Blur Reveal
Un flou CSS de 3 px se dissipe et l'élément grossit légèrement (scale 1.05) en 0,4 s au survol — révélation progressive, pure CSS.
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-0350-root centre un bouton de 200 px. Au repos, filter: blur(3px) floutifie tout l'élément (texte + fond). Au survol, filter: blur(0) et transform: scale(1.05) s'appliquent en 0,4 s : le contenu devient net et l'élément grandit légèrement. Le flou de départ obscurcit le contenu sans le masquer — on peut deviner l'élément. L'agrandissement de 5 % renforce l'impression d'approche, comme si l'objectif d'une caméra faisait la mise au point.
:focus-visible déclenche le même état net + agrandi. Sous mouvement réduit, le flou de repos est supprimé (filter: none) et le transform est neutralisé au survol — l'élément est toujours lisible au repos et aucun mouvement n'est produit. Cette règle de réduction s'applique statiquement : même sans survol, le contenu reste lisible.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le flou de repos est supprimé (filter: nonestatiquement) et letransformest neutralisé au survol. L'élément est toujours lisible. Aucun mouvement n'est produit. - Accessibilité du contenu flouté : le flou rend le contenu difficile à lire au repos — c'est l'effet voulu pour un 'révélation'. Assurez-vous que l'élément est atteignable au clavier (via Tab) pour que les utilisateurs sans souris puissent lire le contenu.
- Clavier : l'élément est un
<button>nativement focusable.:focus-visibledéclenche la révélation (blur(0) + scale) et ajoute un contour de 2 px. - Toucher : sur écran tactile, le contenu flouté peut être difficile à tapper sans voir ce qu'il représente. Envisagez un libellé visible en dessous de l'élément flouté pour guider l'utilisateur.
Compatibilité navigateur
Pure CSS. Propriétés : filter: blur(), transform: scale, transition, :focus-visible. Vérifié dans Chromium et Firefox : flou et révélation visibles, deux copies indépendantes, 0 erreur. filter crée un nouveau contexte d'empilement et peut affecter la position des enfants en position: fixed.
Sans :focus-visible (avant 2021), le focus clavier ne déclenche pas la révélation. L'élément est alors toujours flouté au repos pour les utilisateurs clavier.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0350-root">
<button class="blr-box blr-reveal" type="button">
<span>Votre texte</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 |
|---|---|---|
Niveau de flou au repos (CSS — blur(3px)) |
3 px | 1 px est à peine perceptible ; 6 px masque efficacement le contenu. Au-delà de 10 px, le flou peut déborder légèrement en dehors de l'élément (selon le navigateur). |
Facteur d'agrandissement (CSS — scale(1.05)) |
1.05 (5 %) | 0 supprime l'agrandissement ; 1.1 est plus prononcé. L'agrandissement peut déborder de l'élément parent — ajoutez overflow: hidden sur le parent. |
Durée (CSS — 0.4s) |
0,4 s | 0,2 s est plus rapide ; 0,6 s est plus lent et dramatique. |
| Contenu à flouter (HTML) | tout le bouton | Pour flouter seulement l'image et pas le texte, appliquez filter: blur() sur l'image seule (un enfant de l'élément) et animez-la indépendamment. |
FAQ
overflow: hidden sur l'élément parent direct. Sur certains navigateurs, isolation: isolate sur l'élément lui-même peut aussi contenir le débordement.blur() à 15-20 px. Le contenu sera visuellement masqué tout en restant dans le DOM — un lecteur d'écran le lit toujours. Pour une masquage sémantique, combinez avec aria-hidden='true' au repos et retirez l'attribut au survol via JavaScript.
