From 972d9014ced7ec18fab3fd10973b423eb00b6ee4 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Thu, 28 May 2026 18:58:05 -0400 Subject: [PATCH] feat(showcase): IR-parity hover animation on masonry thumbnails MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit FC already matched IR's staggered entry fade-in; this adds the missing piece — hover zoom (scale 1.03) + brighten (1.1) on each thumbnail, with overflow:hidden so the scaled image clips to the rounded card. Disabled under prefers-reduced-motion. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/src/components/discovery/MasonryGrid.vue | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/discovery/MasonryGrid.vue b/frontend/src/components/discovery/MasonryGrid.vue index c482f2a..ecc43dc 100644 --- a/frontend/src/components/discovery/MasonryGrid.vue +++ b/frontend/src/components/discovery/MasonryGrid.vue @@ -100,10 +100,17 @@ onUnmounted(() => observer && observer.disconnect()) .fc-masonry__item { display: block; padding: 0; border: 0; background: none; cursor: pointer; width: 100%; + overflow: hidden; border-radius: 4px; } .fc-masonry__item img { - width: 100%; height: auto; display: block; border-radius: 4px; + width: 100%; height: auto; display: block; background: rgb(var(--v-theme-surface-light)); + /* IR-parity hover: zoom + brighten the thumbnail (style.css ~1772). */ + transition: transform 0.3s ease, filter 0.3s ease; +} +.fc-masonry__item:hover img { + transform: scale(1.03); + filter: brightness(1.1); } .fc-masonry__sentinel { display: flex; justify-content: center; padding: 32px 0; min-height: 60px; @@ -127,5 +134,7 @@ onUnmounted(() => observer && observer.disconnect()) animation: none; opacity: 1; } + .fc-masonry__item img { transition: none; } + .fc-masonry__item:hover img { transform: none; } }