Zoom with Overlay
Un carré suit la souris, le doigt ou les flèches sur votre image, et le panneau voisin montre exactement cette zone agrandie deux fois.
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
À gauche, le cadre .zov-frame contient votre <img class="zov-image"> et le carré repère .zov-indicator ; à droite, le panneau .zov-result est vide dans le HTML. Le script lui donne en fond l'image elle-même, ou le fichier de data-zoom-src : il n'y a plus d'image à recopier à la main dans le panneau.
La taille du carré est déduite du panneau : largeur du panneau divisée par data-zoom (2), soit 68 px pour le panneau par défaut (140 px de large, 136 px à l'intérieur de sa bordure). À chaque déplacement, le carré reste dans l'image et le panneau affiche, agrandi, exactement ce que le carré couvre, recadrage object-fit: cover compris. Au repos, le panneau montre le centre de l'image.
Le script câble chaque .fx-0184-root séparément et suit les changements de taille (ResizeObserver). Image et panneau sont côte à côte et passent l'un sous l'autre quand la place manque.
Accessibilité
- Clavier : l'image se prend au Tab, le carré apparaît, les flèches le déplacent de 10 px (40 px avec Maj) et Échap le masque ; le panneau suit.
- Toucher : poser et glisser le doigt promène le carré ; le défilement de la page est retenu sur l'image seulement (
touch-action: none). - Lecteurs d'écran : l'image et son texte alternatif sont lus dans un groupe nommé ; le carré et le panneau, purement visuels, sont masqués (
aria-hidden). - Mouvement réduit : sous
prefers-reduced-motion: reduce, le carré apparaît sans fondu ; il n'y a pas d'autre animation.
Compatibilité navigateur
Pointer Events, object-fit, aspect-ratio, ResizeObserver et près de 4 Ko de JavaScript, sans dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : image rouge de l'acheteur bien reprise dans le panneau, deux copies indépendantes, script collé deux fois sans erreur, flèches au clavier, doigt réel à 390 px (Chromium), panneau passé sous l'image sans débordement.
Sans JavaScript, l'image s'affiche et le panneau reste vide. Sans ResizeObserver, le panneau se recalcule au prochain mouvement après un changement de taille.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0184-root">
<div class="zov-wrap">
<div class="zov-frame" tabindex="0" role="group" aria-label="Zoom : survolez l'image, glissez le doigt ou utilisez les flèches ; la zone choisie s'affiche agrandie à côté" data-zoom="2">
<img class="zov-image" src="votre-photo.jpg" data-zoom-src="votre-photo-grande.jpg" alt="Description de la photo">
<span class="zov-label" aria-hidden="true">Hover</span>
<div class="zov-indicator" aria-hidden="true"></div>
</div>
<div class="zov-result" aria-hidden="true"></div>
</div>
</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 .zov-image) |
motif violet quadrillé (SVG intégré) | Votre photo et son alt. data-zoom-src sur la même balise donne au panneau un fichier plus grand et plus net. |
data-zoom (sur .zov-frame) |
2 | Agrandissement dans le panneau ; il fixe aussi la taille du carré (panneau ÷ zoom). |
--zov-width · --zov-ratio |
180px · 9 / 7 | Largeur et proportions de l'image. |
--zov-panel · --zov-panel-ratio |
140px · 1 | Largeur et proportions du panneau ; un panneau allongé donne un carré repère allongé. |
--zov-gap · --zov-radius |
1rem · 0.75rem | Espace entre image et panneau, arrondi des deux. |
Couleurs du carré (règle .zov-indicator) |
bord blanc, fond indigo à 20 % | Changez border et background pour l'accorder à votre charte. |
FAQ
<div> vide : le script y reprend l'image du cadre (ou data-zoom-src) et la garde à jour si vous changez la photo.data-zoom. Augmentez le zoom pour un carré plus petit et un détail plus fort.
