Hover Sound Card

Cet effet est gratuit — la catégorie Atmosphère en contient 57 au total, dont 10 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

Exemples d'usage

Plateforme

Tout ce qu'il vous faut pour créer.

Découvrez nos fonctionnalités clés — survolez pour en savoir plus.

① Hero / Landing — Mise en avant de fonctionnalité

QuandHero d'une landing page SaaS ou d'un portfolio : une ou plusieurs cartes présentent les avantages clés du produit.

PourquoiLe micro-lift au survol donne l'impression que la carte « réagit » à l'intérêt du visiteur — signal d'interactivité sans script, sans coût de chargement.

Réglagesborder-radius: 16px, transition: 0.4s ease (plus doux), translateY(-6px) pour un lift plus prononcé, fond renforcé : rgba(99,102,241,0.15).

Pourquoi les équipes nous choisissent

6 super-pouvoirs intégrés

② Composant produit — Grille de fonctionnalités

QuandSection « Fonctionnalités » ou « Services » : plusieurs cartes côte à côte avec icône + label, chacune sélectionnable.

PourquoiQuand toutes les cartes répondent avec le même lift, la grille paraît vivante — le visiteur comprend intuitivement que chaque item est cliquable.

RéglagesCouleur brand : remplacer #6366f1 par votre couleur primaire. Transition 0.2s pour une réponse plus vive en grille dense. translateY(-3px) pour un lift discret sur petit format.

Choisissez votre plan

Sans CB · Annulable à tout moment

Starter

0€

gratuit à vie

3 projets
5 Go stockage
Support communauté

Populaire

Pro

9€

/mois

Projets illimités
50 Go stockage
Support prioritaire

Équipe

29€

/mois

Tout en Pro
500 Go stockage
Support dédié

③ Micro-interaction de conversion — Sélecteur de plan tarifaire

QuandPage pricing : chaque offre est une carte ; le survol signale le plan ciblé avant le clic sur « Choisir ».

PourquoiLe lift + changement de bordure confirment visuellement le plan survolé — réduit l'hésitation avant le clic CTA.

Réglagesborder: 2px solid (au lieu de 1px) pour un impact visuel plus fort ; transition: 0.2s pour une réactivité immédiate ; ajouter box-shadow: 0 8px 24px rgba(99,102,241,0.25) sur :hover.

Comment ça marche

L'effet repose entièrement sur le sélecteur :hover CSS couplé à une règle transition: 0.3s sans propriété ciblée. Au survol, le fond passe de rgba(99,102,241,0.1) à rgba(99,102,241,0.2) et la bordure de rgba(99,102,241,0.2) à rgb(99,102,241) — le moteur CSS interpole les deux états automatiquement, sans aucun JavaScript ni requestAnimationFrame.

Le déplacement vertical est produit par transform: translateY(-4px) sur :hover. translateY passe par le chemin de composition GPU : aucun reflow, aucun recalcul de layout à chaque frame — le mouvement est gratuit en termes de coût de rendu.

La palette de base utilise la teinte indigo #6366f1 (Tailwind Indigo-500) déclinée en rgba() pour fond et bordure. La déclaration transition: 0.3s sans liste explicite de propriétés couvre toutes les propriétés modifiées en une seule ligne — pratique, mais légèrement moins performant que transition: transform 0.3s, border-color 0.3s, background 0.3s si d'autres propriétés sont animées par ailleurs.

Accessibilité

prefers-reduced-motion : absent dans le code — aucune vérification de cette préférence OS. Ajoutez @media (prefers-reduced-motion: reduce) { .snd-hover-card { transition: none; } } si l'effet est utilisé dans un contexte qui doit la respecter.
Aucun attribut aria-* dans le code HTML de base. Si la carte est interactive (lien ou bouton), ajoutez role="button" (ou wrappez dans un <button> natif) et un aria-label descriptif.
L'effet est purement visuel au survol — il ne répond pas au :focus clavier. Pour le focus visible, ajoutez .snd-hover-card:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; transform: translateY(-4px); }.
cursor: pointer est présent — affordance correcte. Vérifiez que var(--text-secondary) du label respecte le ratio de contraste WCAG AA (≥ 4,5:1) sur votre fond de page.
Sur mobile, :hover se déclenche au premier tap (état persistant jusqu'au tap ailleurs) : le lift s'active correctement, mais l'UX diffère du desktop.

Compatibilité navigateur

100 % CSS — transitions et transform supportés dans tous les navigateurs depuis 2012. Zéro dépendance externe, zéro JavaScript.

Chrome 26+✓ Complet

Firefox 16+✓ Complet

Safari 9+✓ Complet

Edge 12+✓ Complet

Mobile iOS✓ Hover = 1er tap

Android Chrome✓ Hover = 1er tap

Sans support CSS transitions (navigateurs antédiluviens), la carte reste affichée et cliquable — seule l'animation manque. Aucune erreur JS.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

HTML

<div class="snd-hover-card" id="sndHoverCard">
  <div class="snd-hover-icon">🎵</div>
  <div class="snd-hover-label">Survolez-moi</div>
</div>

CSS

.snd-hover-card  {
   width: 180px;
   padding: 20px;
   border-radius: 12px;
   background: rgba(99, 102, 241, 0.1);
   border: 1px solid rgba(99, 102, 241, 0.2);
   text-align: center;
   transition: 0.3s;
   cursor: pointer;
   }

.snd-hover-card:hover  {
   transform: translateY(-4px);
   border-color: rgb(99, 102, 241);
   background: rgba(99, 102, 241, 0.2);
   }

.snd-hover-icon  {
   font-size: 2rem;
   margin-bottom: 8px;
   }

.snd-hover-label  {
   font-size: 0.8rem;
   color: var(--text-secondary);
   }

JavaScript (fx-0526)

// Effet CSS pur — pas de JavaScript nécessaire

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriété	Défaut	Effet
.snd-hover-card { width }	180px	Largeur de la carte. Passez en % ou max-content pour une grille responsive.
.snd-hover-card { border-radius }	12px	Arrondi des coins. 0 = carré strict, 16px–24px = look plus rond et moderne.
.snd-hover-card { transition }	0.3s	Durée de l'animation. 0.15s = vif et nerveux, 0.5s = doux. Ajoutez une easing : `0.3s cubic-bezier(0.34,1.56,0.64,1)` pour un léger rebond en fin de lift.
.snd-hover-card:hover { transform }	translateY(-4px)	Amplitude et direction. `translateY(-8px)` pour un lift fort, `scale(1.03)` pour une mise en avant volumétrique, ou combinés.
rgba(99, 102, 241, …)	#6366f1 Indigo-500	Couleur de base de la carte : remplacez `99, 102, 241` partout dans le CSS par les composantes RGB de votre couleur brand, ou définissez `--brand-rgb: 99 102 241` et utilisez `rgba(var(--brand-rgb), 0.1)`.
.snd-hover-card:hover { box-shadow }	absent	Ajoutez `box-shadow: 0 8px 24px rgba(99,102,241,0.30)` sur `:hover` pour une élévation Material-like qui renforce le lift.
.snd-hover-icon { font-size }	2rem	Taille de l'icône. Remplacez l'emoji 🎵 par n'importe quel emoji ou une icône SVG inline dans le HTML.

FAQ

Le nom dit « Hover Sound Card » mais je n'entends aucun son — est-ce normal ?

Oui. Le code de cet effet est 100 % CSS : aucun JavaScript, aucune Web Audio API. L'animation est un lift visuel pur (transform + transition). Si vous souhaitez ajouter un son au survol, branchez-le côté JS : document.querySelector('.snd-hover-card').addEventListener('mouseenter', () => { const ctx = new AudioContext(); const o = ctx.createOscillator(); o.frequency.value = 880; o.connect(ctx.destination); o.start(); o.stop(ctx.currentTime + 0.05); }).

Comment rendre la carte accessible au clavier ?

Wrappez la carte dans un <button> ou un <a href> natif, ou ajoutez tabindex="0" sur le .snd-hover-card. Ajoutez ensuite dans votre CSS : .snd-hover-card:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; transform: translateY(-4px); } pour que le focus visuel déclenche le même lift que le hover.

Comment adapter la carte à une palette brand différente d'indigo ?

Remplacez les trois occurrences de rgba(99, 102, 241, …) dans le CSS par les composantes RGB de votre couleur. Exemple avec Emerald (#10b981) : rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2) et rgb(16, 185, 129). Pour centraliser, définissez une custom property CSS : :root { --brand: 16,185,129; } et utilisez rgba(var(--brand), 0.1).

Effets liés — Atmosphère

Voir tous les effets Atmosphère →

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus