Cuando navegamos por tiendas online como Amazon o grandes marketplaces, uno de los elementos que más mejora la experiencia del usuario es el zoom en las imágenes de producto. Este efecto permite observar los detalles de una imagen simplemente pasando el cursor por encima, sin necesidad de abrirla en otra ventana.
La buena noticia es que este tipo de funcionalidad se puede implementar de forma muy sencilla utilizando HTML, CSS y JavaScript puro, sin depender de plugins pesados ni librerías externas. En este artículo aprenderás paso a paso cómo crear una galería de imágenes con zoom tipo Amazon, ligera, responsive y compatible con cualquier sitio web o CMS como WordPress.
Qué vamos a crear
El objetivo es construir una pequeña galería de producto que incluya una imagen principal, miniaturas para cambiar de imagen y un efecto de zoom dinámico al mover el cursor. Además, el diseño será completamente responsive, por lo que funcionará correctamente tanto en escritorio como en dispositivos móviles.
Este tipo de sistema es muy útil para páginas de producto, portfolios, galerías de imágenes o cualquier proyecto donde quieras mostrar imágenes con mayor detalle.
Estructura HTML de la galería
La base de todo comienza con una estructura HTML sencilla. Creamos un contenedor principal que agrupará las miniaturas y la imagen principal. Dentro de él tendremos dos secciones: una para las miniaturas y otra para la vista principal.
<div class="zoom-gallery">
<div class="thumbs">
<div class="thumb active" data-full="imagen1.webp">
<img src="imagen1.webp" alt="Miniatura 1">
</div>
<div class="thumb" data-full="imagen2.webp">
<img src="imagen2.webp" alt="Miniatura 2">
</div>
</div>
<div class="main-view" id="mainView">
<img
id="mainImage"
class="main-image"
src="imagen1.webp"
alt="Imagen principal"
>
</div>
</div>Cada miniatura incluye un atributo personalizado llamado data-full. Este atributo guarda la URL de la imagen grande que se cargará en la vista principal cuando el usuario haga clic.
Gracias a este pequeño detalle podemos cambiar la imagen principal de forma dinámica sin necesidad de recargar la página.
Estilos CSS para la galería
El CSS se encarga de organizar la estructura visual y de aplicar el diseño de la galería. Para colocar las miniaturas y la imagen principal utilizamos CSS Grid, lo que nos permite crear una distribución limpia y adaptable.
.zoom-gallery{
max-width:900px;
margin:0 auto;
display:grid;
grid-template-columns:110px 1fr;
gap:20px;
}Esto crea una disposición con dos columnas: una pequeña para las miniaturas y otra más grande para la imagen principal.
Las miniaturas se organizan en columna mediante Flexbox, lo que permite mantener un espaciado uniforme entre ellas.
.thumbs{
display:flex;
flex-direction:column;
gap:12px;
}Para mejorar la estética de la galería se añaden bordes redondeados, sombras suaves y una pequeña animación cuando el usuario pasa el cursor por encima de las miniaturas.
.thumb:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}La imagen principal también incorpora bordes redondeados y una ligera sombra que ayuda a destacar el contenido visual.
.main-view{
border-radius:28px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}Estos pequeños detalles hacen que la galería tenga un aspecto mucho más moderno y profesional.
Cómo funciona el efecto zoom
El efecto de zoom se basa en modificar dinámicamente el punto de origen de la transformación de la imagen. Cuando el usuario mueve el cursor sobre la imagen principal, el script detecta su posición dentro del contenedor.
Primero obtenemos las coordenadas del cursor dentro de la imagen.
mainView.addEventListener('mousemove', (e) => {
const rect = mainView.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
});Estas coordenadas se convierten en porcentajes para que el zoom se adapte correctamente al tamaño de la imagen.
Después aplicamos la transformación que amplifica la imagen y ajusta el punto de origen.
mainImage.style.transformOrigin = `${x}% ${y}%`;
mainImage.style.transform = `scale(2.2)`;De esta manera, el zoom se produce exactamente en el punto donde se encuentra el cursor, lo que genera una experiencia muy similar a la que vemos en grandes tiendas online.
Cuando el cursor abandona la imagen, el zoom vuelve automáticamente al estado original.
Cambiar la imagen al hacer clic
Otro elemento clave de esta galería es la posibilidad de cambiar la imagen principal al hacer clic en una miniatura.
Para lograrlo utilizamos un pequeño evento de JavaScript que obtiene la URL almacenada en el atributo data-full y la asigna como nueva fuente de la imagen principal.
thumb.addEventListener('click', () => {
const newImage = thumb.getAttribute('data-full');
mainImage.src = newImage;
});Esto permite crear galerías dinámicas con múltiples imágenes sin complicar la estructura del código.
Diseño responsive para móviles
Hoy en día es fundamental que cualquier componente web funcione correctamente en dispositivos móviles. Por esa razón la galería incluye un pequeño ajuste responsive que reorganiza la estructura cuando la pantalla es más pequeña.
@media (max-width:768px){
.zoom-gallery{
grid-template-columns:1fr;
}
.thumbs{
flex-direction:row;
}
}En lugar de mantener las miniaturas en una columna lateral, estas pasan a colocarse debajo de la imagen principal y se muestran en horizontal. Esto mejora la navegación en pantallas táctiles y hace que la galería sea mucho más cómoda de usar.
Ventajas de implementar este sistema
Crear una galería de imágenes con zoom mediante HTML, CSS y JavaScript tiene varias ventajas importantes. En primer lugar, el código es extremadamente ligero, lo que ayuda a mantener una buena velocidad de carga en la web. Esto es especialmente importante si te preocupa el posicionamiento SEO y la experiencia del usuario.
Además, al no depender de plugins externos, puedes integrar este sistema fácilmente en cualquier proyecto, incluyendo sitios desarrollados en WordPress, landing pages, portfolios o tiendas online personalizadas.
Otra ventaja es que el código es completamente personalizable. Puedes modificar el nivel de zoom, cambiar el diseño de las miniaturas, añadir más imágenes o adaptar la galería al estilo visual de tu proyecto.
Notas finales
Implementar una galería de imágenes con zoom no tiene por qué ser complicado ni requerir herramientas pesadas. Con una estructura sencilla de HTML, algunos estilos en CSS y unas pocas líneas de JavaScript es posible recrear una experiencia muy similar a la que ofrecen plataformas como Amazon.
Este tipo de funcionalidad mejora notablemente la presentación de imágenes y puede marcar la diferencia en páginas de producto, portfolios o cualquier web donde el contenido visual tenga un papel importante.
Si te interesa aprender más sobre desarrollo web moderno, optimización de código y técnicas prácticas para crear interfaces interactivas, en MasterCodePro encontrarás más tutoriales pensados para desarrolladores y creadores digitales.
