Improve card image hover: center small, pan large

wwwroot/app.js

@@ -543,6 +543,7 @@ function buildCard(s, { showAuthor = false, allowDelete = false, allowEdit = fal
   `;
   if (hasImage) {
     const btn = card.querySelector(".card-visual");
+    setupCardVisualHover(btn, s.screenshotUrl);
     btn.addEventListener("click", () => openLightbox(s.screenshotUrl, s.name));
   }
   if (allowEdit) {
@@ -669,6 +670,50 @@ function openLightbox(url, title) {
   document.body.appendChild(overlay);
 }
 
+function setupCardVisualHover(el, url) {
+  if (!el || !url) return;
+  const img = new Image();
+  let naturalW = 0;
+  let naturalH = 0;
+  let loaded = false;
+  img.src = url;
+  img.onload = () => {
+    naturalW = img.naturalWidth;
+    naturalH = img.naturalHeight;
+    loaded = true;
+  };
+
+  const reset = () => {
+    el.classList.remove("hovering");
+    el.style.backgroundSize = "";
+    el.style.backgroundPosition = "";
+  };
+
+  el.addEventListener("mouseenter", () => {
+    el.classList.add("hovering");
+    el.style.backgroundSize = "auto";
+    el.style.backgroundPosition = "center";
+  });
+
+  el.addEventListener("mousemove", (e) => {
+    if (!loaded) return;
+    const rect = el.getBoundingClientRect();
+    const overW = naturalW - rect.width;
+    const overH = naturalH - rect.height;
+    if (overW <= 0 && overH <= 0) {
+      el.style.backgroundPosition = "center";
+      return;
+    }
+    const xRatio = (e.clientX - rect.left) / rect.width;
+    const yRatio = (e.clientY - rect.top) / rect.height;
+    const xPercent = overW > 0 ? xRatio * 100 : 50;
+    const yPercent = overH > 0 ? yRatio * 100 : 50;
+    el.style.backgroundPosition = `${xPercent}% ${yPercent}%`;
+  });
+
+  ["mouseleave", "blur"].forEach(evt => el.addEventListener(evt, reset));
+}
+
 async function main() {
   setupHandlers();
   try {