Comment créer un effet de texte flou révélé au survol dans Webflow ?
Apprenez à créer un effet de texte flou qui se révèle au survol dans Webflow pour les spoilers et contenus cachés.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un effet de texte flou qui se révèle au survol dans Webflow, idéal pour les spoilers, réponses cachées ou contenus premium.
Exemple
Survolez pour révéler — cliquez pour garder affiché
Réponse cachée
Le chiffre d'affaires de Gemeos en 2024 était de 1,2M€ 🎉
👆 Survolez pour révélerSpoiler
Le personnage principal était le meurtrier depuis le début.
👆 Survolez pour révélerContenu premium
La stratégie complète est disponible dans notre guide Notion réservé aux clients Gemeos.
👆 Survolez pour révéler| Attribut | Élément | Comportement |
|---|---|---|
| data-blur-reveal | Texte ou div à flouter | Flou au chargement, révélé au hover ou clic |
| revealed (classe) | Ajoutée au clic | Révélation permanente jusqu'au reload |
1. Ajoutez l'attribut sur vos éléments
Sur tout texte ou Div à flouter dans Webflow, ajoutez le custom attribute data-blur-reveal avec la valeur true. Le script applique automatiquement le filtre blur et le hint "Survolez pour révéler".
2. Ajoutez le script dans Footer code
(function() {
var style = document.createElement('style');
style.textContent =
'.blur-reveal { filter: blur(5px); transition: filter 0.4s ease; cursor: pointer; user-select: none; }' +
'.blur-reveal:hover, .blur-reveal.revealed { filter: blur(0); }' +
'.blur-reveal-hint { font-size: 11px; color: #9ca3af; display: block; margin-top: 4px; }' +
'.blur-reveal.revealed .blur-reveal-hint { display: none; }';
document.head.appendChild(style);
document.querySelectorAll('[data-blur-reveal]').forEach(function(el) {
el.classList.add('blur-reveal');
var hint = document.createElement('span');
hint.className = 'blur-reveal-hint';
hint.textContent = '👆 Survolez pour révéler';
el.parentNode.insertBefore(hint, el.nextSibling);
el.addEventListener('click', function() {
el.classList.add('revealed');
});
});
})();3. Variante CSS pure (sans JS)
.spoiler { filter: blur(6px); transition: filter 0.4s; cursor: pointer; }
.spoiler:hover { filter: blur(0); }Conclusion
Un effet de révélation élégant pour créer de la curiosité. Cas d'usage :
- Réponses aux FAQ ou quizz
- Résultats ou scores cachés
- Contenus exclusifs avec teasing
Survolez les textes floutés pour les révéler
Quel est le chiffre d'affaires de Gemeos ?
C'est notre secret bien gardé 😄
👆 Survolez pour révéler
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
