Hover Weight
Transition CSS pure de light à black au survol — poids, espacement et couleur s'animent simultanément, 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. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur la pseudo-classe :hover et la propriété transition CSS. Aucun JavaScript n'est nécessaire : chaque .vf-hover-word déclare transition: font-weight .3s, letter-spacing .3s, color .3s, ce qui permet au navigateur d'interpoler les trois propriétés simultanément dès que le pointeur entre sur l'élément.
La transition de poids de 300 (Light) à 900 (Black) exploite l'axe wght de la police variable Inter. Avec une police statique, font-weight sauterait au seuil le plus proche sans animation ; avec Inter (variable font), le navigateur interpole en continu le long de l'axe de poids pour un rendu fluide.
L'espacement des lettres bascule simultanément de 4px (expansif) à -1px (serré). Ce mouvement compense optiquement le gain de largeur visuelle qu'engendre un poids fort en police variable — resserrer l'espacement rééquilibre l'empreinte perçue du mot. La couleur passe de blanc #fff à violet #8b5cf6, signalant l'état actif sans recourir à un soulignement ou un surlignage.
Les trois propriétés s'animent à la même durée de .3s, créant un mouvement visuel unifié. La structure est réduite à l'essentiel : un conteneur .vf-hover-scene en colonne flex centrée et des <span class="vf-hover-word"> pour chaque mot interactif.
Accessibilité
- prefers-reduced-motion : absent du code — aucune règle
@media (prefers-reduced-motion)n'est présente ; les transitions s'exécutent toujours, y compris pour les utilisateurs ayant activé la réduction de mouvement dans leur OS. À ajouter si l'effet est utilisé sur une grande surface ou de nombreux mots. - L'effet repose sur
:hoveruniquement — aucun état:focusou:focus-visiblen'est stylé dans le code. Les utilisateurs naviguant au clavier ne verront pas le changement de poids. Si l'effet est informatif (et non purement décoratif), ajouter:focus-visibleà la règle de survol. - Contraste couleur : blanc
#fffsur fond sombre#0a0a0f→ ratio ≈ 19,8:1 (WCAG AAA). Violet#8b5cf6sur#0a0a0f→ ratio ≈ 4,7:1 (WCAG AA). Les deux états passent le niveau AA. - Aucun attribut ARIA n'est présent dans le code de base. Si les mots constituent une navigation ou un menu, les envelopper dans un
<nav aria-label="…">ou une liste<ul>sémantique. - L'effet est purement visuel et décoratif dans sa forme de base — pas de modal, pas de focus trap, pas de gestion de focus JavaScript.
Compatibilité navigateur
Nécessite les transitions CSS (universelles) et une police variable pour l'animation fluide du poids. Inter est disponible via Google Fonts ou en local.
Sans police variable chargée, la transition de <code>font-weight</code> saute aux seuils disponibles (300 → 400 → 700 → 900) au lieu d'animer en continu. L'effet reste fonctionnel — le poids change au survol, seule la fluidité d'interpolation est absente. Sans support des transitions CSS (IE 9 et antérieurs), le changement de style est instantané mais toujours visible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="vf-hover-scene">
<span class="vf-hover-word">MOT 1</span>
<span class="vf-hover-word">MOT 2</span>
<span class="vf-hover-word">MOT 3</span>
<!-- Facultatif : -->
<span class="vf-hover-label">Survolez les mots</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 |
|---|---|---|
| font-weight (état normal) | 300 | Poids de départ. 100–300 = très léger, produit un contraste fort avec 900. 400 = régulier, contraste modéré. |
| font-weight (état :hover) | 900 | Poids cible au survol. 700 = Bold classique, 900 = Black maximal. Visible uniquement avec une police variable chargée. |
| letter-spacing (état normal) | 4px | Espacement initial. Plus il est large, plus le resserrement au survol crée un effet de « compression » dramatique. |
| letter-spacing (état :hover) | -1px | Espacement au survol. -1px à -3px serre visuellement le mot lourd ; rester au-dessus de -3px pour la lisibilité. |
| color (état :hover) | #8b5cf6 | Couleur du mot au survol. Remplacer par votre couleur accent pour intégrer l'effet à votre design system. |
| transition | .3s | Durée des 3 transitions simultanées (poids, espacement, couleur). 0,2s = sec et rapide, 0,5s = lent et fluide. |
| font-size (sur .vf-hover-word) | 2rem | Taille de base. Plus la taille est grande, plus l'animation de poids est perceptible. Monter à 4–5rem pour une affiche. |
| gap (sur .vf-hover-scene) | 12px | Espacement vertical entre les mots. Augmenter pour aérer, réduire pour une liste serrée. |
FAQ
wght de la fonte. Avec une police statique (Google Fonts en mode legacy ou une fonte personnalisée non-variable), la transition saute aux seuils disponibles (400, 700…). Pour garantir la fluidité, charger Inter en version variable : @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap').vf-hover-word à chaque <a>, <span> ou <li> cible. L'effet ne touche que les éléments portant cette classe. Pour les items de nav plus petits, surcharger font-size et les valeurs de letter-spacing / font-weight via un sélecteur plus spécifique (nav .vf-hover-word).display:flex; flex-direction:column pour éviter le problème.
