Click to Zoom
Un clic, une tape ou la touche Entrée agrandit votre image deux fois à l'endroit visé ; un second clic la remet en entier.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre est un vrai <button class="czm-frame"> qui contient votre <img class="czm-image">, une légende facultative et la pastille « Click to zoom ». À l'activation, le script bascule la classe is-zoomed et l'état aria-pressed ; le CSS applique alors scale(var(--czm-scale)) (2) en --czm-duration (0,4 s) et fait disparaître la pastille.
Avec la souris ou le doigt, le point cliqué devient l'origine de l'agrandissement (transform-origin en pourcentage) : on zoome là où l'on a cliqué. Avec Entrée ou Espace, qui n'ont pas de position, le zoom part du centre ; une fois l'image agrandie, les flèches déplacent la zone de 10 % et Échap revient à la vue entière.
Chaque .fx-0183-root est câblée à part, sans identifiant : plusieurs images cliquables sur une page restent indépendantes, et le script peut être collé deux fois sans erreur.
Accessibilité
- Bouton natif : le cadre se reçoit au Tab et s'active à Entrée ou Espace ;
aria-pressedannonce « enfoncé » quand l'image est agrandie. Son nom vient du texte alternatif de l'image et de la pastille. - Clavier une fois zoomé : flèches pour déplacer la vue, Échap pour revenir. Dans Safari, Tab n'atteint les boutons que si l'option « Tab pour sélectionner chaque élément » est active (Option + Tab sinon), comme pour tout bouton.
- Toucher : une tape zoome au point touché, une seconde tape revient ;
touch-action: manipulationévite le délai du double-tap sans bloquer le défilement. - Mouvement réduit : sous
prefers-reduced-motion: reduce, l'image passe d'un coup à l'agrandissement et revient sans animation.
Compatibilité navigateur
Bouton HTML, transformations CSS, aspect-ratio et 2 Ko de JavaScript, sans dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : zoom au point cliqué, deux copies indépendantes, script collé deux fois sans erreur, Entrée puis flèches, tape réelle à 390 px (Chromium).
Sans JavaScript, le bouton affiche l'image sans zoom. Sans aspect-ratio, le cadre prend la hauteur de l'image.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0183-root">
<button type="button" class="czm-frame" aria-pressed="false">
<img class="czm-image" src="votre-image.jpg" alt="Description de l'image">
<span class="czm-label" aria-hidden="true">Click Me</span>
<span class="czm-hint">Click to zoom</span>
</button>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Image (HTML — src de .czm-image) |
motif violet quadrillé (SVG intégré) | Votre image et son alt, qui sert aussi de nom au bouton. Un fichier deux fois plus large que le cadre reste net une fois agrandi. |
--czm-scale |
2 | Agrandissement après le clic. 2.5 à 3 pour du petit texte. |
--czm-duration |
0.4s | Durée de l'aller et du retour. |
--czm-width · --czm-ratio · --czm-radius |
280px · 7 / 5 · 0.75rem | Largeur maximale (le cadre rétrécit sur petit écran), proportions et arrondi. |
Pastille .czm-hint |
« Click to zoom » | Texte d'invite, masqué une fois l'image agrandie ; traduisez-le ou supprimez le <span>. |
Légende .czm-label |
« Click Me » | Texte centré sur l'image ; à retirer sur une vraie photo. |
