Image Zoom
Pur CSS — le survol déclenche un scale(1.15) sur l'image, confinée par overflow:hidden ; un scrim semi-transparent fade en parallèle.
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 un binôme CSS. La carte porte overflow:hidden : quand l'image grossit, elle déborde logiquement mais reste découpée aux bords du conteneur. Le survol (:hover img) applique transform:scale(1.15), animé par transition:transform .5s. Aucune modification de layout — la carte ne bouge pas, seul le pixel de l'image est mis à l'échelle.
Un calque overlay (.zoom-overlay) est positionné en absolute; inset:0 avec opacity:0 au repos. Au survol, il passe à opacity:1 via une transition indépendante (opacity .3s), plus rapide que le zoom — ce décalage de vitesse donne au fondu une impression de réactivité. Le fond rgba(0,0,0,0.3) et le texte centré sont entièrement dans le HTML, sans JS.
Aucun JavaScript n'est impliqué. L'effet s'applique à n'importe quel <img> avec object-fit:cover à l'intérieur d'un conteneur de dimensions fixes : changer la taille de la carte suffit, le zoom reste proportionnel.
Accessibilité
- prefers-reduced-motion ABSENT : aucune règle
@media (prefers-reduced-motion:reduce)dans le code — la transitiontransform .5ss'exécute même si l'OS signale la préférence de réduction. À ajouter manuellement :@media (prefers-reduced-motion:reduce) { .card-image-zoom img { transition:none } }. - :focus-within absent : le zoom ne se déclenche qu'au survol (
:hover). Un utilisateur au clavier qui navigue jusqu'à la carte ne voit pas le zoom. Ajouter.card-image-zoom:focus-within img { transform:scale(1.15) }pour couvrir le clavier. - L'attribut
altest présent dans le code de démo (alt="Mountain") — à remplacer par une description réelle en production pour les lecteurs d'écran. - Contraste de l'overlay : fond
rgba(0,0,0,0.3)+ texte blanc — ratio ≈ 7:1 sur fond mi-noir, conforme WCAG AA. - La carte est un
<div>sansroleniaria-label— si elle est cliquable (lien vers un article, un produit), utiliser un<a>natif ou ajouterrole="button"ettabindex="0".
Compatibilité navigateur
Utilise uniquement CSS3 : transform, transition, overflow, object-fit. Aucune dépendance JS ni externe.
Sans support transition, le passage au survol est instantané mais fonctionnel. Sans object-fit (très anciens navigateurs), l'image peut se déformer — mitiger avec des dimensions width/height fixes sur l'élément <img>.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="card-demo card-image-zoom">
<img src="votre-image.jpg" alt="Description de l'image">
<!-- Facultatif : scrim + texte au survol -->
<div class="zoom-overlay">
<span>Texte facultatif</span>
</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 |
|---|---|---|
| scale(1.15) | 1.15 | Facteur de zoom au survol. 1.08 = très subtil, 1.15 = standard, 1.25 = dramatique. Modifier dans la règle .card-image-zoom:hover img. |
| transition: transform .5s | .5s | Durée de l'animation de zoom. 0.3s = snappy, 0.5s = fluide, 0.8s = cinématique. Modifier dans .card-image-zoom img. |
| rgba(0,0,0,.3) | .3 | Opacité du fond du scrim au survol. 0 = invisible (supprimer le bloc overlay), 0.5 = bien visible. Modifier dans .zoom-overlay. |
| transition: opacity .3s | .3s | Durée du fondu du scrim, indépendante de la durée du zoom. Différencier les deux pour un effet de décalage temporel. |
| --radius-xl | 1rem | Variable CSS — rayon des coins de la carte. 0 = carré net, 0.5rem = léger, 1.5rem = très arrondi. |
| --bg-card | #12121a | Variable CSS — fond de la carte visible pendant le chargement de l'image ou si elle échoue à se charger. |
FAQ
data- exposé. La valeur scale(1.15) est une constante dans la règle .card-image-zoom:hover img. Modifiez-la directement dans votre feuille de style ou surchargez-la avec un sélecteur plus spécifique (.ma-carte.card-image-zoom:hover img { transform:scale(1.20) }).:hover se comporte différemment selon le navigateur : un tap peut déclencher l'état hover sur iOS Safari (persistant jusqu'au prochain tap ailleurs), mais pas de manière fiable sur Android Chrome. Pour un comportement cohérent en touch, complétez avec :focus-within ou ajoutez des listeners touchstart/touchend via JS.<div class="zoom-overlay"> du HTML — le zoom sur l'image fonctionne indépendamment de l'overlay. Vous pouvez aussi conserver le bloc et lui ajouter display:none dans votre CSS, puis le révéler dynamiquement par JS si besoin.
