← Tutti gli articoli

Tutorial

Zoom dell'immagine al passaggio del mouse — una lightbox senza libreria

15 maggio 2026 · di JustZix Team

Gallerie, negozi, banche di immagini — miniature ovunque. Per vedere un'immagine per intero, devi cliccare, aspettare, tornare indietro. Questa regola aggiunge un'anteprima al passaggio del mouse: passi il mouse su una miniatura, una versione più grande compare accanto al cursore. Una lightbox leggera senza alcuna libreria.

La regola

Il JavaScript della regola — pattern di URL per la galleria che usi, o * globalmente:

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'; });

Come funziona

Un solo elemento di anteprima

Creiamo esattamente un <img> e lo riutilizziamo, scambiando solo il suo src. Nessuna pulizia del DOM, nessuna perdita.

pointer-events: none

L'anteprima sta sopra la pagina. Senza pointer-events: none catturerebbe essa stessa gli eventi del mouse — il cursore «entrerebbe» nell'anteprima, mouseout si attiverebbe in modo errato e l'anteprima tremolerebbe. Con questa regola l'anteprima è trasparente al mouse.

currentSrc contro src

img.currentSrc è la versione che il browser ha effettivamente scelto da srcset — di solito più nitida di src. La usiamo per prima, con src come riserva.

position: fixed più coordinate client

position: fixed posiziona l'anteprima rispetto alla finestra, e e.clientX/clientY è la posizione del cursore rispetto alla finestra — coincidono, quindi l'anteprima segue il cursore indipendentemente dallo scroll.

Una variante — dimensione piena invece della miniatura

In molte gallerie la miniatura ha un URL come .../thumb/foto.jpg mentre la dimensione piena è .../large/foto.jpg. Sostituisci box.src con l'indirizzo riscritto:

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

Il pattern varia da sito a sito — guarda il src di una miniatura e di una foto piena, trova la differenza.

Trappole

• Gli sfondi CSS non sono immagini. Le foto inserite come background-image non sono elementi <img> — questa regola non le catturerà.
• Il caricamento pigro. Una miniatura con loading="lazy" a cui non hai ancora scrollato può non avere alcun src. Una volta visibile, funziona normalmente.
• Icone minuscole. La regola cattura ogni <img>, icone dell'UI incluse. Per puntare solo alla galleria, restringi il selettore, es. e.target.closest('.gallery img').

Vedi anche

• Esempi — lo snippet zoom e altro codice pronto all'uso
• Auto-pager — un'altra regola «aggiungi una funzione mancante»
• Mini-IDE nella scheda — dove testare regole come questa

Installa JustZix — e guarda le foto senza cliccare su ognuna.