← Tous les articles

Tutoriels

Zoom d'image au survol — une lightbox sans bibliothèque

15 mai 2026 · par JustZix Team

Galeries, boutiques, banques d'images — des vignettes partout. Pour voir une image en entier, vous devez cliquer, attendre, revenir. Cette règle ajoute un aperçu au survol : vous survolez une vignette, une version plus grande surgit près du curseur. Une lightbox légère sans aucune bibliothèque.

La règle

Le JavaScript de la règle — motif d'URL pour la galerie que vous utilisez, ou * globalement :

const box = document.createElement('img');
box.style.cssText =
  'position:fixed;pointer-events:none;z-index:99999;max-width:40vw;' +
  'max-height:80vh;box-shadow:0 8px 32px rgba(0,0,0,.4);' +
  'border-radius:8px;display:none';
document.body.appendChild(box);
addEventListener('mouseover', (e) => {
  const img = e.target.closest('img');
  if (!img) return;
  box.src = img.currentSrc || img.src;
  box.style.display = 'block';
});
addEventListener('mousemove', (e) => {
  box.style.left = (e.clientX + 24) + 'px';
  box.style.top = (e.clientY + 24) + 'px';
});
addEventListener('mouseout', () => { box.style.display = 'none'; });

Comment ça marche

Un seul élément d'aperçu

On crée exactement un <img> et on le réutilise, en n'échangeant que son src. Aucun nettoyage du DOM, aucune fuite.

pointer-events: none

L'aperçu se place au-dessus de la page. Sans pointer-events: none, il capterait lui-même les événements souris — le curseur « entrerait » dans l'aperçu, mouseout se déclencherait mal et l'aperçu clignoterait. Avec cette règle, l'aperçu est transparent à la souris.

currentSrc contre src

img.currentSrc est la version que le navigateur a réellement choisie dans srcset — généralement plus nette que src. On l'utilise en premier, avec src en repli.

position: fixed plus coordonnées client

position: fixed place l'aperçu par rapport à la fenêtre, et e.clientX/clientY est la position du curseur par rapport à la fenêtre — ils correspondent, donc l'aperçu suit le curseur quel que soit le défilement.

Une variante — taille réelle au lieu de la vignette

Dans beaucoup de galeries, la vignette a une URL comme .../thumb/photo.jpg tandis que la taille réelle est .../large/photo.jpg. Remplacez box.src par l'adresse réécrite :

box.src = (img.currentSrc || img.src).replace('/thumb/', '/large/');

Le motif diffère d'un site à l'autre — regardez le src d'une vignette et d'une photo entière, trouvez la différence.

Pièges

• Les fonds CSS ne sont pas des images. Les photos placées en background-image ne sont pas des éléments <img> — cette règle ne les attrapera pas.
• Le chargement paresseux. Une vignette avec loading="lazy" que vous n'avez pas encore atteinte au défilement peut n'avoir aucun src. Une fois visible, elle fonctionne normalement.
• Les icônes minuscules. La règle attrape chaque <img>, icônes d'UI comprises. Pour viser seulement la galerie, restreignez le sélecteur, p. ex. e.target.closest('.gallery img').

À voir aussi

• Exemples — le snippet zoom et d'autres codes prêts à l'emploi
• Auto-pager — une autre règle « ajoute une fonctionnalité absente »
• Mini-IDE dans un onglet — où tester des règles comme celle-ci

Installez JustZix — et regardez les photos sans cliquer sur chacune.