{"id":28334097,"url":"https://github.com/gianmattus-programmer/ecommerce-zoom-effect","last_synced_at":"2026-01-25T09:36:11.123Z","repository":{"id":288339349,"uuid":"967714281","full_name":"gianmattus-programmer/ECOMMERCE-ZOOM-EFFECT","owner":"gianmattus-programmer","description":"Efecto de zoom interactivo para imágenes de productos, ideal para sitios de comercio electrónico.","archived":false,"fork":false,"pushed_at":"2025-04-16T22:15:23.000Z","size":111,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-19T12:43:51.129Z","etag":null,"topics":["zoom-images"],"latest_commit_sha":null,"homepage":"https://ecommerce-zoom-effect.netlify.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gianmattus-programmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-16T22:14:00.000Z","updated_at":"2025-04-17T21:56:52.000Z","dependencies_parsed_at":"2025-04-17T11:03:29.073Z","dependency_job_id":"b3caed69-cc8d-42b0-a6e0-a5b993dbaaf3","html_url":"https://github.com/gianmattus-programmer/ECOMMERCE-ZOOM-EFFECT","commit_stats":null,"previous_names":["gianmattus-programmer/ecommerce-zoom-effect"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gianmattus-programmer/ECOMMERCE-ZOOM-EFFECT","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianmattus-programmer%2FECOMMERCE-ZOOM-EFFECT","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianmattus-programmer%2FECOMMERCE-ZOOM-EFFECT/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianmattus-programmer%2FECOMMERCE-ZOOM-EFFECT/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianmattus-programmer%2FECOMMERCE-ZOOM-EFFECT/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gianmattus-programmer","download_url":"https://codeload.github.com/gianmattus-programmer/ECOMMERCE-ZOOM-EFFECT/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianmattus-programmer%2FECOMMERCE-ZOOM-EFFECT/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28750875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T09:00:19.176Z","status":"ssl_error","status_checked_at":"2026-01-25T09:00:04.131Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["zoom-images"],"created_at":"2025-05-26T20:58:57.232Z","updated_at":"2026-01-25T09:36:11.117Z","avatar_url":"https://github.com/gianmattus-programmer.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Efecto de Zoom en Productos E-commerce 🔍\r\n\r\n## Descripción\r\nEste 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.\r\n\r\n## Características ✨\r\n- Zoom interactivo al pasar el mouse\r\n- Diseño responsive\r\n- Soporte para múltiples imágenes\r\n- Efecto suave y profesional\r\n- Compatible con todos los navegadores modernos\r\n\r\n## Tecnologías Utilizadas 🛠️\r\n- HTML5\r\n- CSS3 (Variables CSS personalizadas)\r\n- JavaScript Vanilla\r\n- Diseño Flexbox\r\n\r\n## Estructura del Proyecto 📁\r\n```\r\n├── index.html\r\n├── style.css\r\n├── script.js\r\n└── images/\r\n    ├── phone1.jpg\r\n    ├── phone2.jpg\r\n    └── phone3.jpg\r\n```\r\n\r\n## Cómo Funciona 🔧\r\nEl efecto de zoom se logra mediante la combinación de CSS y JavaScript:\r\n1. Las imágenes se muestran en contenedores con la clase `imageZoom`\r\n2. Al hacer hover, se activa un pseudo-elemento que muestra la versión ampliada\r\n3. JavaScript rastrea la posición del mouse para actualizar el área de zoom\r\n\r\n## Instalación 💻\r\n1. Clona el repositorio:\r\n```bash\r\ngit clone https://github.com/gianmattus-programmer/ecommerce-zoom-effect.git\r\n```\r\n2. Abre el archivo `index.html` en tu navegador\r\n\r\n## Uso 🚀\r\n- Simplemente pasa el cursor sobre cualquier imagen para activar el efecto de zoom\r\n- El zoom seguirá el movimiento del cursor para mostrar diferentes áreas de la imagen\r\n- La imagen se amplía al 150% de su tamaño original\r\n\r\n## Personalización 🎨\r\nPuedes ajustar varios parámetros en el CSS:\r\n- Tamaño del contenedor de imagen (`.imageZoom`)\r\n- Nivel de zoom (variable `background-size`)\r\n- Bordes y estilos del contenedor\r\n\r\n## Autor 👨‍💻\r\n**Gianmattus-Programmer**\r\n- GitHub: [@gianmattus-programmer](https://github.com/gianmattus-programmer)\r\n\r\n## Licencia 📄\r\nEste proyecto está bajo la Licencia MIT - mira el archivo LICENSE.md para detalles\r\n\r\n---\r\n⌨️ con ❤️ por [Gianmattus-Programmer](https://github.com/gianmattus-programmer)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgianmattus-programmer%2Fecommerce-zoom-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgianmattus-programmer%2Fecommerce-zoom-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgianmattus-programmer%2Fecommerce-zoom-effect/lists"}