bvandeusen/FabledCurator
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 35 Wiki Activity

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

Browse Source 
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:
Bryan Van Deusen
2026-05-28 18:58:05 -04:00
parent 75b6b8056e
commit 972d9014ce
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/discovery/MasonryGrid.vue
+10 -1
View File
@@ -100,10 +100,17 @@ onUnmounted(() => observer && observer.disconnect())
.fc-masonry__item { .fc-masonry__item {
display: block; padding: 0; border: 0; background: none; display: block; padding: 0; border: 0; background: none;
cursor: pointer; width: 100%; cursor: pointer; width: 100%;
overflow: hidden; border-radius: 4px;
} }
.fc-masonry__item img { .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)); 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 { .fc-masonry__sentinel {
display: flex; justify-content: center; padding: 32px 0; min-height: 60px; display: flex; justify-content: center; padding: 32px 0; min-height: 60px;
@@ -127,5 +134,7 @@ onUnmounted(() => observer && observer.disconnect())
animation: none; animation: none;
opacity: 1; opacity: 1;
} }
.fc-masonry__item img { transition: none; }
.fc-masonry__item:hover img { transform: none; }
} }
</style> </style>