← Todos los artículos

Guías

Reglas de zoom al pasar el ratón y descarga rápida de imágenes

17 mayo 2026 · por JustZix Team

Las imágenes son la otra mitad de tomar el control de los medios. Esta guía reúne tres reglas de JustZix para trabajar con imágenes: zoom al pasar el ratón, carga inmediata para que nada se quede en blanco, y un botón de descarga rápida que respeta las reglas del mismo origen.

Zoom al pasar el ratón, solo con CSS

La mejora más simple no necesita nada de JavaScript. Una transformación CSS escala una imagen cuando pasas el ratón sobre ella, lo que es suficiente para leer el detalle fino sin abrir una caja de luz.

img {
  transition: transform .18s ease;
}

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

Escalar con transform mantiene la maquetación estable porque la imagen sigue ocupando su caja original. El z-index alto al pasar el ratón significa que la imagen ampliada flota por encima del contenido vecino en lugar de quedar recortada.

Una lupa precisa con JavaScript

Para imágenes detalladas, una lupa que sigue al cursor supera a una escala plana. Esta regla rastrea el puntero y desplaza el origen de la transformación de la imagen al punto bajo el 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);
})();

La lupa amplía hacia donde esté el cursor, así que recorrer una imagen grande se siente natural. Reiniciar transform en pointerleave devuelve la imagen a su tamaño normal.

Forzar la carga de todas las imágenes

La carga diferida es buena para el ancho de banda pero molesta cuando quieres leer o guardar una galería entera y la mitad sigue en blanco. Esta regla convierte las imágenes diferidas en inmediatas y empuja a las lentas a cargarse.

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

Muchos sitios guardan la URL real en un atributo data-src y solo la copian a src cuando la imagen se desplaza a la vista. Copiarla tú mismo fuerza la carga inmediatamente. La misma idea funciona para srcset.

Un botón de descarga de un clic

Esta regla añade un pequeño botón de descarga a la esquina de cada imagen cuando pasas el ratón sobre ella. Usa el atributo estándar download en un ancla, que pide al navegador que guarde el archivo.

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

El atributo download funciona limpiamente para imágenes del mismo origen. Para imágenes de origen cruzado el navegador puede abrir el archivo en una pestaña nueva en lugar de guardarlo, lo cual es un comportamiento esperado y no algo que una regla deba intentar derrotar. Usar currentSrc elige la resolución que el navegador realmente eligió de un srcset adaptable.

Juntándolo todo

• Ejecuta el CSS de zoom al pasar el ratón en todo el sitio; es barato e inofensivo.
• Reserva la lupa de JavaScript para sitios con muchas imágenes como galerías o documentación.
• Combina la regla de carga inmediata con el botón de descarga para que la imagen esté totalmente cargada antes de guardarla.

Las tres están disponibles en nuestros ejemplos listos para usar, o descarga JustZix y crea las tuyas. Para el lado del vídeo del control de medios, empieza con forzar controles nativos en cada vídeo.