← Alle Beiträge

Anleitungen

Bild-Zoom beim Hovern — eine Lightbox ohne Bibliothek

15 Mai 2026 · von JustZix Team

Galerien, Shops, Stockfoto-Seiten — überall Vorschaubilder. Um ein Bild voll zu sehen, musst du klicken, warten, zurückgehen. Diese Regel ergänzt eine Hover-Vorschau: Du hoverst über ein Vorschaubild, eine größere Version erscheint am Cursor. Eine leichtgewichtige Lightbox ganz ohne Bibliothek.

Die Regel

Das JavaScript der Regel — URL-Muster für die Galerie, die du nutzt, oder * global:

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

Wie es funktioniert

Ein Vorschau-Element

Wir erstellen genau ein <img> und verwenden es wieder, indem wir nur sein src tauschen. Kein DOM-Aufräumen, keine Lecks.

pointer-events: none

Die Vorschau liegt über der Seite. Ohne pointer-events: none würde sie selbst Maus-Events fangen — der Cursor würde in die Vorschau „eintreten", mouseout würde falsch feuern und die Vorschau würde flackern. Mit dieser Regel ist die Vorschau für die Maus durchlässig.

currentSrc gegen src

img.currentSrc ist die Version, die der Browser tatsächlich aus srcset gewählt hat — meist schärfer als src. Wir greifen zuerst danach, mit src als Rückfalloption.

position: fixed plus Client-Koordinaten

position: fixed platziert die Vorschau relativ zum Fenster, und e.clientX/clientY ist die Cursorposition relativ zum Fenster — sie passen zusammen, also folgt die Vorschau dem Cursor unabhängig vom Scrollen.

Eine Variante — volle Größe statt des Vorschaubilds

In vielen Galerien hat das Vorschaubild eine URL wie .../thumb/foto.jpg, während die volle Größe .../large/foto.jpg ist. Tausche box.src gegen die umgeschriebene Adresse:

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

Das Muster unterscheidet sich von Seite zu Seite — schau dir das src eines Vorschaubilds und eines vollen Fotos an, finde den Unterschied.

Fallstricke

• CSS-Hintergründe sind keine Bilder. Als background-image platzierte Fotos sind keine <img>-Elemente — diese Regel fängt sie nicht.
• Lazy Loading. Ein Vorschaubild mit loading="lazy", zu dem du noch nicht gescrollt hast, hat eventuell kein src. Sobald es im Sichtfeld erscheint, funktioniert es normal.
• Winzige Icons. Die Regel fängt jedes <img>, UI-Icons inklusive. Um nur die Galerie zu treffen, verenge den Selektor, z. B. e.target.closest('.gallery img').

Siehe auch

• Beispiele — das Zoom-Snippet und anderer fertiger Code
• Auto-Pager — eine weitere „ergänze ein fehlendes Feature"-Regel
• Mini-IDE im Tab — wo man solche Regeln testet

Installiere JustZix — und sieh dir Fotos an, ohne jedes einzeln anzuklicken.