← Todos los artículos

Tutoriales

Zoom de la imagen al pasar el ratón — una lightbox sin librería

15 mayo 2026 · por JustZix Team

Galerías, tiendas, bancos de imágenes — miniaturas por todas partes. Para ver una imagen entera, tienes que hacer clic, esperar, volver atrás. Esta regla añade una vista previa al pasar el ratón: pasas el ratón sobre una miniatura, una versión más grande aparece junto al cursor. Una lightbox ligera sin ninguna librería.

La regla

El JavaScript de la regla — patrón de URL para la galería que usas, 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'; });

Cómo funciona

Un solo elemento de vista previa

Creamos exactamente un <img> y lo reutilizamos, intercambiando solo su src. Sin limpieza del DOM, sin fugas.

pointer-events: none

La vista previa está sobre la página. Sin pointer-events: none capturaría ella misma los eventos del ratón — el cursor «entraría» en la vista previa, mouseout se dispararía de forma errónea y la vista previa parpadearía. Con esta regla la vista previa es transparente al ratón.

currentSrc contra src

img.currentSrc es la versión que el navegador ha elegido efectivamente de srcset — normalmente más nítida que src. La usamos primero, con src como reserva.

position: fixed más coordenadas client

position: fixed posiciona la vista previa respecto a la ventana, y e.clientX/clientY es la posición del cursor respecto a la ventana — coinciden, así que la vista previa sigue al cursor independientemente del scroll.

Una variante — tamaño completo en lugar de la miniatura

En muchas galerías la miniatura tiene una URL como .../thumb/foto.jpg mientras que el tamaño completo es .../large/foto.jpg. Sustituye box.src por la dirección reescrita:

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

El patrón varía de sitio a sitio — mira el src de una miniatura y de una foto completa, encuentra la diferencia.

Trampas

• Los fondos CSS no son imágenes. Las fotos insertadas como background-image no son elementos <img> — esta regla no las capturará.
• La carga perezosa. Una miniatura con loading="lazy" a la que todavía no has hecho scroll puede no tener ningún src. Una vez visible, funciona normalmente.
• Iconos minúsculos. La regla captura cada <img>, iconos de la UI incluidos. Para apuntar solo a la galería, restringe el selector, p. ej. e.target.closest('.gallery img').

Mira también

• Ejemplos — el snippet de zoom y otro código listo para usar
• Auto-pager — otra regla «añade una función que falta»
• Mini-IDE en la pestaña — dónde probar reglas como esta

Instala JustZix — y mira las fotos sin pulsar en cada una.