← All posts

Guides

Image hover-zoom and quick download rules

17 May 2026 · by JustZix Team

Images are the other half of taking control of media. This guide collects three JustZix rules for working with pictures: zoom on hover, eager loading so nothing stays blank, and a quick download button that respects same-origin rules.

Hover to zoom, with CSS only

The simplest enhancement needs no JavaScript at all. A CSS transform scales an image when you hover it, which is enough to read fine detail without opening a lightbox.

img {
  transition: transform .18s ease;
}

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

Scaling with transform keeps layout stable because the image still occupies its original box. The high z-index on hover means the enlarged image floats above neighbouring content instead of being clipped.

A precise magnifier with JavaScript

For detailed images, a follow-the-cursor magnifier beats a flat scale. This rule tracks the pointer and shifts the image transform origin to the spot under the 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);
})();

The magnifier zooms toward wherever the cursor is, so panning across a large picture feels natural. Resetting transform on pointerleave returns the image to normal size.

Force every image to load

Lazy loading is good for bandwidth but annoying when you want to read or save a whole gallery and half of it is still blank. This rule flips lazy images to eager and kicks slow ones into loading.

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

Many sites stash the real URL in a data-src attribute and only copy it to src when the image scrolls into view. Copying it yourself forces the load immediately. The same idea works for srcset.

A one-click download button

This rule adds a small download button to the corner of each image when you hover it. It uses the standard download attribute on an anchor, which asks the browser to save the file.

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

The download attribute works cleanly for same-origin images. For cross-origin pictures the browser may open the file in a new tab instead of saving it, which is expected behaviour and not something a rule should try to defeat. Using currentSrc picks the resolution the browser actually chose from a responsive srcset.

Putting it together

• Run the hover-zoom CSS site-wide; it is cheap and harmless.
• Reserve the JavaScript magnifier for image-heavy sites like galleries or documentation.
• Combine the eager-loading rule with the download button so the picture is fully loaded before you save it.

All three are available in our ready-made examples, or download JustZix and build your own. For the video side of media control, start with force native controls on every video.