Title

Logo Templates — Hover Zoom on Preview (with smooth transition)

Goal

On desktop, when hovering a logo card:

The thumbnail subtly zooms (scale up a bit).

The overlay with buttons fades in (already implemented).

Respect reduced motion preferences.

On mobile, keep current behavior (buttons visible, no hover).

Implementation (micro changes)

File: client/src/components/logo/LogoTemplateCard.tsx (your card component)

1) Wrap the image in a zoomable container and use group-hover:
--- a/client/src/components/logo/LogoTemplateCard.tsx
+++ b/client/src/components/logo/LogoTemplateCard.tsx
@@ -1,6 +1,6 @@
-<div
-  className="relative rounded-xl border overflow-hidden group"
+<div
+  className="relative rounded-xl border overflow-hidden group"
   onMouseEnter={() => setHover(true)}
   onMouseLeave={() => setHover(false)}
 >
-  <img src={template.previewUrl} alt={template.name} className="w-full object-contain" />
+  <div className="relative aspect-[4/3] bg-white">
+    <img
+      src={template.previewUrl}
+      alt={template.name}
+      className="w-full h-full object-contain transition-transform duration-300 ease-out group-hover:scale-[1.06] motion-reduce:transition-none motion-reduce:transform-none"
+      draggable={false}
+    />
+  </div>

2) Keep your overlay; ensure it transitions cleanly:
-  <div className={`absolute inset-0 bg-black/60 flex flex-col items-center justify-center gap-3 transition-opacity ${hover ? "opacity-100" : "opacity-0"} hidden md:flex`}>
+  <div className={`absolute inset-0 bg-black/60 flex flex-col items-center justify-center gap-3 transition-opacity duration-200 ease-out ${hover ? "opacity-100" : "opacity-0"} hidden md:flex`}>
     <button className="btn btn-outline bg-white" onClick={downloadSvg}>Download SVG</button>
     <button className="btn btn-primary" onClick={goCustomize}>Customize in Composer</button>
   </div>

3) (Optional polish) Slight lift on the whole card:
-<div className="relative rounded-xl border overflow-hidden group"
+<div className="relative rounded-xl border overflow-hidden group transition-shadow duration-200 hover:shadow-lg"

4) Mobile: keep buttons visible (unchanged)

Already present:

<div className="flex md:hidden flex-col gap-2 p-3">
  <button className="btn btn-outline" onClick={downloadSvg}>Download SVG</button>
  <button className="btn btn-primary" onClick={goCustomize}>Customize in Composer</button>
</div>

Notes

aspect-[4/3] prevents layout shift while the image loads; change to your actual aspect if needed.

group-hover:scale-[1.06] gives a tasteful pop. You can go 1.08 if you want extra drama.

motion-reduce:* respects accessibility for users who prefer reduced motion.

QA (quick)

Desktop hover → image scales smoothly, overlay fades in, card shadow lifts.

Hover out → returns to normal; no jitter.

Mobile → no zoom (no hover), buttons present and working.

Download always works; Customize triggers paywall for non-premium and routes for premium.

Want a tiny parallax tilt on hover (like 2–3° based on mouse position) for ultra-premium vibes? I can give you a 10-line variant when you’re ready.