feat(showcase): IR-parity hover animation on masonry thumbnails

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) <noreply@anthropic.com>
This commit is contained in:
2026-05-28 18:58:05 -04:00
parent 75b6b8056e
commit 972d9014ce
@@ -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; }
}
</style>