From 9ab779e7811dcfe95e3123240bf991eae194ffe3 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Sun, 13 Sep 2026 19:21:29 +0000
Subject: [PATCH] fix(ecommerce): zoom-hover del producto revela la imagen
 completa
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El hover-zoom escalaba (transform:scale) la misma <Image> ya recortada
por object-cover -- para fotos verticales (ej. figura de acción de pie)
eso dejaba partes del producto (la cabeza) fuera del recorte desde el
propio render, así que ningún nivel de zoom las mostraba. Se reemplaza
por un overlay con background-image usando la foto completa
(background-size en un solo valor preserva el aspect ratio real) y
background-position siguiendo el cursor, que sí permite recorrer toda
la imagen.

De paso: las miniaturas ahora cambian la imagen principal también con
hover (onMouseEnter), no solo con click.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV
---
 .../components/product/product-gallery.tsx    | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/workloads/ecommerce/components/product/product-gallery.tsx b/workloads/ecommerce/components/product/product-gallery.tsx
index 92d059f..cf2e7f3 100644
--- a/workloads/ecommerce/components/product/product-gallery.tsx
+++ b/workloads/ecommerce/components/product/product-gallery.tsx
@@ -14,6 +14,16 @@ interface HoverZoomOrigin { x: number; y: number }
 // continua en touch, asi que en mobile simplemente no aparece el efecto,
 // sin romper nada). Independiente del zoom interactivo del modal
 // (click -> Dialog con scale/drag), que sigue igual.
+//
+// El overlay de hover usa background-image (no transform:scale sobre el
+// <Image object-cover>) a proposito: escalar la imagen ya recortada por
+// object-cover nunca iba a revelar las partes recortadas (ej. la cabeza
+// de una figura de accion en una foto vertical) -- el recorte pasa antes
+// del zoom, en el propio render. Con background-size en un solo valor
+// (ancho%, alto en "auto") se preserva el aspect ratio real de la foto
+// completa, y background-position 0%-100% permite recorrer TODA la
+// imagen con el cursor, no solo la porcion que object-cover dejaba
+// visible en reposo.
 const HOVER_ZOOM_SCALE = 2.2;
 
 export function ProductGallery({ images, name }: { images: string[]; name: string }) {
@@ -57,7 +67,7 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
   return (
     <div className="grid gap-4 lg:grid-cols-[86px_1fr]">
       <div className="order-2 flex gap-3 overflow-x-auto lg:order-1 lg:flex-col">
-        {images.map((image) => <button type="button" key={image} onClick={() => { setSelected(image); reset(); }} className={`relative aspect-square w-20 shrink-0 overflow-hidden rounded-2xl border-2 ${selected === image ? "border-fuchsia-500" : "border-transparent"}`}><Image src={image} alt="" fill sizes="80px" className="object-cover" /></button>)}
+        {images.map((image) => <button type="button" key={image} onClick={() => { setSelected(image); reset(); }} onMouseEnter={() => { setSelected(image); reset(); }} className={`relative aspect-square w-20 shrink-0 overflow-hidden rounded-2xl border-2 ${selected === image ? "border-fuchsia-500" : "border-transparent"}`}><Image src={image} alt="" fill sizes="80px" className="object-cover" /></button>)}
       </div>
       <Dialog open={open} onOpenChange={changeOpen}>
         <DialogTrigger asChild>
@@ -73,10 +83,17 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
               fill
               priority
               sizes="(max-width: 1024px) 100vw, 50vw"
-              className="object-cover transition-transform duration-150 ease-out"
+              className="object-cover"
+            />
+            <div
+              aria-hidden
+              className="pointer-events-none absolute inset-0 bg-slate-50 transition-opacity duration-150 ease-out"
               style={{
-                transform: `scale(${hoverZoom ? HOVER_ZOOM_SCALE : 1})`,
-                transformOrigin: hoverZoom ? `${hoverZoom.x}% ${hoverZoom.y}%` : "center",
+                opacity: hoverZoom ? 1 : 0,
+                backgroundImage: `url(${selected})`,
+                backgroundRepeat: "no-repeat",
+                backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`,
+                backgroundPosition: hoverZoom ? `${hoverZoom.x}% ${hoverZoom.y}%` : "center",
               }}
             />
             <span className="absolute bottom-5 right-5 inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-xs font-black shadow-xl"><ZoomIn className="size-4" />Zoom interactivo</span>