Thermal Vision
Quatre zones thermiques CSS animent une carte de chaleur hover-réactive — du blanc incandescent au bleu glacial, sans une 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. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet est 100 % CSS pur — zéro JavaScript. Quatre <div> portent chacun une classe de température (thermal-hot, thermal-warm, thermal-cool, thermal-cold) avec un dégradé radial qui imite la palette infrarouge : blanc au cœur brûlant, jaune-orange en périphérie chaude, puis bleu-cyan pour le frais et bleu-nuit pour le froid.
Chaque objet possède un pseudo-élément ::after en position: absolute; inset: -8px, héritant du même dégradé et filtré par filter: blur(12px). Ce halo flou simule la diffusion thermique de l'imagerie infrarouge — le rayonnement déborde du corps de l'objet, exactement comme en physique réelle.
Au survol du container (.thermal-container:hover), les zones chaudes s'agrandissent (scale(1.3) pour hot, scale(1.15) pour warm) et accumulent un box-shadow coloré simulant l'émission énergétique. Les zones froides rétrécissent (scale(0.9) et scale(0.8)) avec un halo bleuté moins intense — une cohérence physique obtenue en CSS pur.
Toutes les transitions sont pilotées par une seule déclaration transition: .5s sur .thermal-object et .thermal-object::after, couvrant simultanément transform, box-shadow, opacity et inset. Le label de statut (.thermal-label) suit une transition sur sa color, passant de 40 % à 80 % d'opacité.
Accessibilité
- prefers-reduced-motion absent : l'effet ne détecte pas cette préférence — les transitions 0,5 s s'exécutent toujours. Pour la conformité WCAG 2.1 §2.3, ajoutez
@media (prefers-reduced-motion: reduce) { .thermal-object, .thermal-object::after, .thermal-label { transition: none; } }. - Interaction hover-only : aucun état
:focusne déclenche l'effet — les utilisateurs clavier ne peuvent pas l'activer. Correctif minimal : ajoutertabindex="0"sur.thermal-containeret étendre les sélecteurs en:hover, :focus-within. - Les quatre zones sont différenciées par couleur uniquement — aucun motif ni texte alternatif. En cas d'usage fonctionnel (alerte, seuil), ajoutez un
aria-labelou un label texte visible par zone pour les utilisateurs daltoniens. - Le
.thermal-label(« hover to activate thermal scan ») est en opacité 40 % au repos — ratio de contraste inférieur à 4,5:1 WCAG AA. Il dépasse le seuil en état hover (80 %), mais l'état initial n'est pas conforme. - Aucun rôle ARIA sur les éléments de l'effet. Le container peut recevoir
role="img"etaria-labelpour décrire la scène aux lecteurs d'écran.
Compatibilité navigateur
Nécessite les dégradés CSS, filter: blur(), transform et les transitions CSS — supportés dans tous les navigateurs modernes depuis 2016.
Sans <code>filter: blur()</code> (IE 11), les halos disparaissent mais les dégradés thermiques restent visibles — l'effet reste lisible, seulement moins immersif. Aucune erreur JS.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="thermal-container">
<div class="thermal-scene">
<div class="thermal-object thermal-hot"></div>
<div class="thermal-object thermal-warm"></div>
<div class="thermal-object thermal-cool"></div>
<div class="thermal-object thermal-cold"></div>
<div class="thermal-label">hover to activate thermal scan</div>
</div>
</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 |
|---|---|---|
| .thermal-hot { background } | radial-gradient(circle, #fff, #ff0, #f80, red) | Stops du dégradé de la zone la plus chaude. Modifiez les couleurs pour adapter la plage (ex. commencer au jaune si le blanc est trop intense, ou inverser pour une logique froide/chaude). |
| .thermal-object { width / height } | 60px | Taille des zones. Montez à 90-120 px pour un hero plein écran, descendez à 40 px pour un widget compact ou une grille dense. |
| .thermal-object::after { filter: blur() } | blur(12px) | Rayon de diffusion thermique. Augmentez à 24-32 px pour un rayonnement diffus sur grand fond sombre, réduisez à 6 px pour un contour resserré. |
| .thermal-container:hover .thermal-hot { transform } | scale(1.3) | Dilatation de la zone hot au survol. Réduisez à scale(1.15) pour un comportement discret ; montez à scale(1.5) pour un effet dramatique. |
| .thermal-object { transition } | 0.5s | Durée des transitions. Ralentissez à 1,2 s pour un scan cinématique, accélérez à 0,15 s pour une réponse quasi-instantanée. |
| .thermal-scene { background } | #0a0020 | Fond de la scène. Utilisez #000 pour un noir infrarouge pur ou #0a0a0f pour s'intégrer au dark standard Effect.Labs. |
| .thermal-scene { gap } | 16px | Espacement entre les zones. Montez à 32-48 px pour aérer la composition, réduisez à 8 px pour un cluster compact. |
FAQ
tabindex="0" sur .thermal-container et étendez tous les sélecteurs .thermal-container:hover en .thermal-container:hover, .thermal-container:focus-within. L'utilisateur active le scan thermique avec Tab seul — :focus-within suffit, pas besoin d'Entrée.:hover — pas de keyframes CSS. Pour une boucle automatique, ajoutez des @keyframes sur transform et box-shadow pour chaque classe, ou déclenchez l'état hover en JavaScript en basculant une classe .active sur .thermal-container.
