/ECOMMERCE-ZOOM-EFFECT

Efecto de zoom interactivo para imágenes de productos, ideal para sitios de comercio electrónico.

Primary LanguageHTMLMIT LicenseMIT

Efecto de Zoom en Productos E-commerce 🔍

Descripción

Este proyecto implementa un efecto de zoom interactivo para imágenes de productos, ideal para sitios de comercio electrónico. Cuando el usuario pasa el cursor sobre una imagen, se activa un efecto de zoom suave que permite ver los detalles del producto.

Características ✨

  • Zoom interactivo al pasar el mouse
  • Diseño responsive
  • Soporte para múltiples imágenes
  • Efecto suave y profesional
  • Compatible con todos los navegadores modernos

Tecnologías Utilizadas 🛠️

  • HTML5
  • CSS3 (Variables CSS personalizadas)
  • JavaScript Vanilla
  • Diseño Flexbox

Estructura del Proyecto 📁

├── index.html
├── style.css
├── script.js
└── images/
    ├── phone1.jpg
    ├── phone2.jpg
    └── phone3.jpg

Cómo Funciona 🔧

El efecto de zoom se logra mediante la combinación de CSS y JavaScript:

  1. Las imágenes se muestran en contenedores con la clase imageZoom
  2. Al hacer hover, se activa un pseudo-elemento que muestra la versión ampliada
  3. JavaScript rastrea la posición del mouse para actualizar el área de zoom

Instalación 💻

  1. Clona el repositorio:
git clone https://github.com/gianmattus-programmer/ecommerce-zoom-effect.git
  1. Abre el archivo index.html en tu navegador

Uso 🚀

  • Simplemente pasa el cursor sobre cualquier imagen para activar el efecto de zoom
  • El zoom seguirá el movimiento del cursor para mostrar diferentes áreas de la imagen
  • La imagen se amplía al 150% de su tamaño original

Personalización 🎨

Puedes ajustar varios parámetros en el CSS:

  • Tamaño del contenedor de imagen (.imageZoom)
  • Nivel de zoom (variable background-size)
  • Bordes y estilos del contenedor

Autor 👨‍💻

Gianmattus-Programmer

Licencia 📄

Este proyecto está bajo la Licencia MIT - mira el archivo LICENSE.md para detalles

⌨️ con ❤️ por Gianmattus-Programmer