← Alle Beiträge

Leitfäden

Bild-Hover-Zoom- und Schnell-Download-Regeln

17 Mai 2026 · von JustZix Team

Bilder sind die andere Hälfte der Kontrolle über Medien. Diese Anleitung sammelt drei JustZix-Regeln für die Arbeit mit Bildern: Zoom beim Überfahren, sofortiges Laden, damit nichts leer bleibt, und eine Schnell-Download-Schaltfläche, die Same-Origin-Regeln respektiert.

Beim Überfahren zoomen, nur mit CSS

Die einfachste Verbesserung braucht überhaupt kein JavaScript. Eine CSS-Transformation skaliert ein Bild, wenn Sie es überfahren, was genug ist, um feine Details zu lesen, ohne eine Lightbox zu öffnen.

img {
  transition: transform .18s ease;
}

img:hover {
  transform: scale(1.6);
  position: relative;
  z-index: 2147483647;
}

Mit transform zu skalieren hält das Layout stabil, weil das Bild immer noch seinen ursprünglichen Kasten einnimmt. Der hohe z-index beim Überfahren bedeutet, dass das vergrößerte Bild über benachbartem Inhalt schwebt, statt abgeschnitten zu werden.

Eine präzise Lupe mit JavaScript

Für detaillierte Bilder schlägt eine dem Cursor folgende Lupe eine flache Skalierung. Diese Regel verfolgt den Zeiger und verschiebt den Transformationsursprung des Bildes auf die Stelle unter dem Cursor.

(function () {
  document.addEventListener('pointermove', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG') { return; }
    var r = img.getBoundingClientRect();
    var x = ((e.clientX - r.left) / r.width) * 100;
    var y = ((e.clientY - r.top) / r.height) * 100;
    img.style.transformOrigin = x + '% ' + y + '%';
  }, true);
  document.addEventListener('pointerenter', function (e) {
    if (e.target && e.target.tagName === 'IMG') {
      e.target.style.transform = 'scale(2.4)';
      e.target.style.transition = 'transform .12s';
    }
  }, true);
  document.addEventListener('pointerleave', function (e) {
    if (e.target && e.target.tagName === 'IMG') {
      e.target.style.transform = '';
    }
  }, true);
})();

Die Lupe zoomt dorthin, wo der Cursor ist, sodass das Schwenken über ein großes Bild natürlich wirkt. Das Zurücksetzen von transform bei pointerleave bringt das Bild zur Normalgröße zurück.

Jedes Bild zum Laden zwingen

Verzögertes Laden ist gut für die Bandbreite, aber ärgerlich, wenn Sie eine ganze Galerie lesen oder speichern wollen und die Hälfte davon noch leer ist. Diese Regel schaltet verzögerte Bilder auf sofort und stupst langsame zum Laden an.

document.querySelectorAll('img[loading="lazy"]').forEach(function (img) {
  img.loading = 'eager';
  if (img.dataset.src && !img.src) {
    img.src = img.dataset.src;
  }
  if (img.dataset.srcset && !img.srcset) {
    img.srcset = img.dataset.srcset;
  }
});

Viele Seiten verstecken die echte URL in einem data-src-Attribut und kopieren sie erst zu src, wenn das Bild ins Sichtfeld scrollt. Sie selbst zu kopieren erzwingt das sofortige Laden. Dieselbe Idee funktioniert für srcset.

Eine Ein-Klick-Download-Schaltfläche

Diese Regel fügt jedem Bild eine kleine Download-Schaltfläche in die Ecke hinzu, wenn Sie es überfahren. Sie verwendet das Standard-download-Attribut auf einem Anker, das den Browser bittet, die Datei zu speichern.

(function () {
  document.addEventListener('pointerenter', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG' || img._dl) { return; }
    img._dl = true;
    var a = document.createElement('a');
    a.textContent = 'Speichern';
    a.href = img.currentSrc || img.src;
    a.download = '';
    a.style.cssText = 'position:absolute;z-index:2147483647;'
      + 'background:#111;color:#fff;font:600 11px sans-serif;'
      + 'padding:3px 7px;border-radius:5px;text-decoration:none';
    var r = img.getBoundingClientRect();
    a.style.left = (r.left + window.scrollX + 4) + 'px';
    a.style.top = (r.top + window.scrollY + 4) + 'px';
    document.body.appendChild(a);
    img.addEventListener('pointerleave', function () {
      a.remove();
      img._dl = false;
    }, { once: true });
  }, true);
})();

Das download-Attribut funktioniert sauber für Same-Origin-Bilder. Bei Cross-Origin-Bildern öffnet der Browser die Datei vielleicht in einem neuen Tab, statt sie zu speichern, was erwartetes Verhalten ist und nichts, das eine Regel zu besiegen versuchen sollte. currentSrc zu verwenden wählt die Auflösung, die der Browser tatsächlich aus einem responsiven srcset gewählt hat.

Es zusammensetzen

• Führen Sie das Hover-Zoom-CSS seitenweit aus; es ist günstig und harmlos.
• Reservieren Sie die JavaScript-Lupe für bildlastige Seiten wie Galerien oder Dokumentation.
• Kombinieren Sie die Sofort-Lade-Regel mit der Download-Schaltfläche, sodass das Bild vollständig geladen ist, bevor Sie es speichern.

Alle drei sind in unseren fertigen Beispielen verfügbar, oder laden Sie JustZix herunter und bauen Sie Ihre eigenen. Für die Videoseite der Mediensteuerung beginnen Sie mit native Steuerungen auf jedem Video erzwingen.