diff --git a/src/components/molecules/PhotoCard.svelte b/src/components/molecules/PhotoCard.svelte index 1fe29d3..d667abe 100644 --- a/src/components/molecules/PhotoCard.svelte +++ b/src/components/molecules/PhotoCard.svelte @@ -21,14 +21,14 @@
sendHover(true)} on:focus={() => sendHover(true)} on:mouseout={() => sendHover(false)} on:blur={() => sendHover(false)} > {#if url} - + {#if photos} -
+
{#each photos as { slug, title, image, location, city }, index} hovered = detail ? index : null} /> {/each} diff --git a/src/style/molecules/_photo-card.scss b/src/style/molecules/_photo-card.scss index bd2e355..4bff96d 100644 --- a/src/style/molecules/_photo-card.scss +++ b/src/style/molecules/_photo-card.scss @@ -34,6 +34,7 @@ flex-wrap: wrap; align-items: center; color: $color-cream; + pointer-events: none; font-size: clamp(#{rem(12px)}, 1.5vw, #{rem(14px)}); @include bp (sm) { diff --git a/src/style/organisms/_collage.scss b/src/style/organisms/_collage.scss index 8e8ddb4..4ae76c3 100644 --- a/src/style/organisms/_collage.scss +++ b/src/style/organisms/_collage.scss @@ -191,10 +191,18 @@ } // Not hovered - &.is-inactive { + &.is-hovered { img { - opacity: 0.5; + opacity: 1.0 !important; } } } + + // Mouse over collage + &.is-hovering { + .photo-card img { + opacity: 0.5; + } + } + } \ No newline at end of file