Hover Lift
La carte s'élève de 15 px et grossit de 2 % au survol — cubic-bezier easeOutBack avec ombre portée et bague lumineuse indigo.
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. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur une unique règle transition: .4s cubic-bezier(.175, .885, .32, 1.275) appliquée à .card-lift. Le quatrième paramètre 1.275 dépasse la valeur 1, ce qui génère un overshoot : la carte monte légèrement au-delà de sa position finale puis revient, donnant la sensation d'un ressort élastique (easeOutBack). La durée de 0,4 s est assez longue pour être perçue, assez courte pour ne pas sembler lourde.
Au survol, .card-lift:hover applique transform: translateY(-15px) scale(1.02) — un lift de 15 px vers le haut et un agrandissement de 2 %. Les deux transformations passent par le compositeur GPU et ne déclenchent aucun reflow de mise en page, garantissant 60 fps même sur des appareils d'entrée de gamme. La transition se rejoue à l'envers à la sortie du survol sans code supplémentaire.
Deux couches de box-shadow s'ajoutent simultanément : une ombre diffuse 0 20px 40px rgba(0,0,0,0.3) qui simule la carte projetant une ombre sur la surface en dessous, renforçant l'illusion de hauteur ; une bague de 1 px sans flou 0 0 0 1px rgba(99,102,241,0.3) en indigo (#6366f1) qui donne un focus coloré discret à la carte active. L'effet est 100 % CSS, zéro JavaScript.
Accessibilité
- prefers-reduced-motion absent : le code ne contient aucun bloc
@media (prefers-reduced-motion: reduce). La transition de 0,4 s s'exécute même lorsque l'utilisateur a activé cette préférence système. Correctif recommandé :@media (prefers-reduced-motion: reduce) { .card-lift { transition: none; } }. - Le
.card-demode référence est un<div>non-interactif — non focusable au clavier. Si la carte est cliquable, utilisez un<button>ou<a>nativement focusable et correctement annoncé par les lecteurs d'écran. - Aucun style
:focus-visiblen'est défini dans le code : l'effet de survol n'est pas reproductible au clavier. Ajoutez.card-lift:focus-visible { transform: translateY(-15px) scale(1.02); box-shadow: … }pour l'équivalence clavier. - Sur mobile (touch),
:hoverreste collé après un tap puis se réinitialise au tap suivant — aucun retour visuel immédiat au premier toucher. Ajoutez un listenertouchstartJS si la réactivité tactile est requise. - Contraste texte par défaut : blanc
#fffsur fond#12121a— ratio ≥ 15:1, largement conforme WCAG AAA (seuil 7:1).
Compatibilité navigateur
Repose uniquement sur les transitions CSS et les transforms GPU — supportées nativement dans tous les navigateurs modernes depuis 2016. Zéro dépendance externe.
Sans support des transitions CSS (navigateurs très anciens), la carte s'affiche normalement et le survol ne produit aucune animation — aucune erreur, l'UI reste lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<!-- .card-demo et .card-lift sont obligatoires — le contenu interne est libre -->
<div class="card-demo card-lift">
<img class="card-thumb" src="thumbnail.jpg" alt="Miniature">
<div class="card-body">
<span class="card-tag">Catégorie</span>
<h3 class="card-title">Titre de la carte</h3>
<p class="card-desc">Description courte du contenu.</p>
<button class="card-cta">Lire →</button>
</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 |
|---|---|---|
| --bg-card | #12121a | Couleur de fond de la carte — remplacez par votre couleur brand. Redéfinissez sur :root ou directement sur le sélecteur .card-demo. |
| --radius-xl | 1rem | Rayon des coins arrondis. 0 = carte carrée, 1.5rem = arrondi prononcé. La valeur s'applique aussi à border-radius via var(--radius-xl). |
| --border | rgba(255,255,255,0.08) | Couleur et opacité du bord visible à l'état repos. Augmentez l'opacité (0.18–0.25) pour un bord plus net sur fond sombre. |
| transition (.card-lift) | .4s cubic-bezier(.175,.885,.32,1.275) | Durée et easing de toute l'animation. Réduisez à .2s pour une réponse immédiate, ou remplacez le cubic-bezier par ease-out pour supprimer le rebond overshoot. |
| translateY (.card-lift:hover) | -15px | Hauteur du lift. -8px = subtil (petites cartes), -20px = dramatique (grandes cartes). Augmentez proportionnellement à la hauteur de la carte. |
| scale (.card-lift:hover) | 1.02 | Facteur de zoom au survol. 1.0 = lift pur sans zoom, 1.05 = agrandissement affirmé. Évitez de dépasser 1.06 pour ne pas déborder sur les cartes voisines. |
| ring color (.card-lift:hover) | rgba(99,102,241,.3) | Couleur de la bague lumineuse de 1 px (indigo #6366f1). Remplacez par votre couleur primaire, ou rgba(0,0,0,0) pour supprimer la bague et ne garder que l'ombre. |
FAQ
.card-demo et .card-lift sur votre composant carte ; aucune directive ni lifecycle hook n'est nécessaire.:hover colle après le premier tap puis se réinitialise au suivant. Pour un retour tactile immédiat, ajoutez un listener JS : card.addEventListener('touchstart', () => card.classList.add('is-lifted')) et définissez .card-lift.is-lifted avec les mêmes règles que :hover. Retirez la classe sur touchend.translateY proportionnellement : -20px à -24px convient pour des cartes hautes. Renforcez aussi l'ombre portée (0 30px 60px rgba(0,0,0,0.35)) pour maintenir l'illusion de hauteur. La valeur scale(1.02) s'adapte automatiquement à la taille de la carte sans modification.
