Blur to Sharp
Texte d'abord flou et semi-transparent, qui se résout en netteté complète au survol — deux propriétés CSS, aucune ligne de JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'état de repos cumule filter: blur(8px) et opacity: 0.5 sur l'élément texte : le mot est rendu illisible et aérien simultanément. La pseudo-classe :hover remet les deux valeurs à leurs valeurs naturelles (blur(0), opacity: 1). La propriété transition: .4s (shorthand) interpole les deux en parallèle sur 400 ms — une seule déclaration pilote l'ensemble de l'animation.
filter et opacity sont promus en couche de composition GPU par les navigateurs modernes : la transition ne déclenche ni reflow ni repaint sur les éléments voisins, elle s'exécute entièrement sur le compositor thread. L'effet reste fluide à 60 fps même sur des pages chargées.
Le JS de l'effet est vide — aucune logique JavaScript. L'effet est déclenché exclusivement par la pseudo-classe :hover du navigateur dans les feuilles de style. Zéro dépendance, zéro framework : copiez le HTML et le CSS, c'est prêt dans n'importe quelle stack.
Accessibilité
- prefers-reduced-motion : absent du code — la transition s'exécute en toutes circonstances, y compris si l'OS signale une préférence pour réduire le mouvement. Compensation recommandée :
@media (prefers-reduced-motion: reduce) { .text-blur-sharp { transition: none; } } - Contraste au repos non conforme WCAG :
opacity: 0.5combiné àfilter: blurrend le texte intentionnellement illisible — c'est l'intention de l'effet. L'état au survol (opacity: 1,blur(0)) doit offrir un ratio ≥ 4,5:1 entre la couleur du texte et le fond pour satisfaire WCAG AA. - Navigation clavier et mobile non couverte : l'effet est strictement déclenché par
:hover. Ajouter:focus-withinà la règle:hoverpour inclure la navigation clavier. Sur écran tactile sans survol, ajouter@media (hover: none) { .text-blur-sharp { filter: none; opacity: 1; } }pour afficher le texte net par défaut. - Le texte reste dans le flux DOM : aucun
aria-hiddenn'est appliqué. Les lecteurs d'écran lisent le contenu normalement, indépendamment de son état visuel flou.
Compatibilité navigateur
Nécessite filter CSS sur éléments HTML — supporté dans tous les navigateurs modernes. Le JS est vide, zéro dépendance externe.
Sur Safari 9.1–15.3 ou iOS 9.3–15.3 : ajoutez <code>-webkit-filter: blur(8px)</code> à la règle de repos pour un comportement identique. Navigateurs sans support <code>filter</code> : le texte s'affiche net à pleine opacité — aucune erreur JS, le contenu reste accessible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<span class="demo-text text-blur-sharp">TEXTE</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| filter: blur(8px) | 8px | Intensité du flou initial dans .text-blur-sharp. De 3 px (subtil, encore lisible) à 14 px (totalement illisible). La valeur au survol est toujours blur(0). |
| opacity: .5 | 0.5 | Transparence initiale dans .text-blur-sharp. Réduire à 0,2–0,3 pour renforcer la dissimulation ; monter à 0,7 pour un flou visible mais texte peu transparent. |
| transition: .4s | 0.4s | Durée et courbe de la transition dans .text-blur-sharp. Exemples : 0.25s ease-out (révélation vive), 0.7s cubic-bezier(0,0,0,1) (débrouillage progressif cinématique). |
| font-size: 2.5rem | 2.5rem | Taille du texte dans .demo-text. Plus le corps est grand, plus l'effet de flou est spectaculaire — un blur(8px) sur 4rem reste reconnaissable comme silhouette, alors qu'à 1rem il disparaît. |
| font-weight: 800 | 800 | Graisse de la police dans .demo-text. Les graisses fortes (700–900) conservent leur silhouette floutée — à privilégier pour les titres hero où la forme du mot doit rester reconnaissable au repos. |
| letter-spacing: -.02em | -.02em | Espacement des lettres dans .demo-text. Un tracking très négatif (-0.05em) resserre les caractères et amplifie l'impact typographique à la révélation. |
| transition-delay sur :hover | 0s | Délai avant la résolution. Déclarable dans .text-blur-sharp:hover { transition-delay: 0.1s; } pour une légère hésitation avant la mise au point. |
FAQ
:hover n'est pas déclenché sur écran tactile. Pour afficher le texte net par défaut sur mobile, ajoutez @media (hover: none) { .text-blur-sharp { filter: none; opacity: 1; } }. Pour une interaction tactile, remplacez :hover par un toggle de classe JavaScript déclenché au toucher.<span class="text-blur-sharp"> distinct. Les transitions sont indépendantes par élément : chaque mot se résout uniquement quand la souris passe dessus. Exemple : <h1><span class="text-blur-sharp">Mot1</span> et <span class="text-blur-sharp">Mot2</span></h1>..text-blur-sharp (repos) mettez transition: 0.8s — c'est la durée du retour au flou ; dans .text-blur-sharp:hover ajoutez transition-duration: 0.25s — c'est la durée de la révélation. Le navigateur prend la durée du bloc dans lequel il entre.
