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; } }