Isolate Homepage collage component and add hover effect on other photos

src/components/molecules/PhotoCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { createEventDispatcher } from 'svelte'
     import Image from '$components/atoms/Image.svelte'
 
     export let id: string
@@ -7,16 +8,25 @@
     export let title: string = undefined
     export let location: any = undefined
     export let city: string = undefined
+    export let hovered: boolean = false
 
-
+    const dispatch = createEventDispatcher()
     const sizes = {
         small: { width: 224 },
         medium: { width: 464 },
         large: { width: 864 },
     }
+
+    const sendHover = (hover: boolean) => dispatch('hover', hover)
 </script>
 
-<div class="photo-card">
+<div class="photo-card"
+    class:is-inactive={hovered}
+    on:mouseenter={() => sendHover(true)}
+    on:focus={() => sendHover(true)}
+    on:mouseout={() => sendHover(false)}
+    on:blur={() => sendHover(false)}
+>
     {#if url}
         <a href={url}>
             <Image

src/components/organisms/Collage.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import PhotoCard from '$components/molecules/PhotoCard.svelte'
+
+    export let photos: any[] = []
+
+    let hovered: number = null
+</script>
+
+{#if photos}
+    <div class="collage">
+        {#each photos as { slug, title, image, location, city }, index}
+            <PhotoCard
+                id={image.id}
+                alt={title}
+                url="/{location.country.slug}/{location.slug}/{slug}"
+                title={title}
+                location={location}
+                city={city}
+                hovered={hovered !== null && hovered !== index}
+                on:hover={({ detail }) => hovered = detail ? index : null}
+            />
+        {/each}
+    </div>
+{/if}

src/routes/index.svelte

@@ -15,8 +15,8 @@
     import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
     import BoxCTA from '$components/atoms/BoxCTA.svelte'
     import DiscoverText from '$components/atoms/DiscoverText.svelte'
-    import PhotoCard from '$components/molecules/PhotoCard.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import Collage from '$components/organisms/Collage.svelte'
     import Locations from '$components/organisms/Locations.svelte'
     import Shop from '$components/organisms/Shop.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
@@ -45,7 +45,7 @@
 
         // Animate collage photos
         timeline.add({
-            targets: '.homepage__collage .photo-card',
+            targets: '.collage .photo-card',
             translateY: ['33.33%', 0],
             rotate (item: HTMLElement) {
                 return [-4, getComputedStyle(item).getPropertyValue('--rotation')]
@@ -98,18 +98,7 @@
     </section>
 
     <section class="homepage__photos">
-        <div class="homepage__collage">
+        <Collage {photos} />
-            {#each photos as { slug, title, image, location, city }}
-                <PhotoCard
-                    id={image.id}
-                    alt={title}
-                    url="/{location.country.slug}/{location.slug}/{slug}"
-                    title={title}
-                    location={location}
-                    city={city}
-                />
-            {/each}
-        </div>
     </section>
 
     <div class="homepage__ctas" id="ctas">

src/style/molecules/_photo-card.scss

@@ -20,6 +20,7 @@
         width: calc(100% + 2px);
         height: calc(100% + 2px);
         object-fit: cover;
+        transition: opacity 0.7s var(--ease-quart);
     }
 
     // Informations
@@ -66,7 +67,7 @@
         & > * {
             opacity: 0;
             transform: translate3d(0, 8px, 0);
-            transition: opacity 0.8s var(--ease-quart), transform 0.8s var(--ease-quart);
+            transition: opacity 0.7s var(--ease-quart), transform 0.8s var(--ease-quart);
 
             @include bp (md) {
                 transform: translate3d(0, 8px, 0);

src/style/organisms/_collage.scss

@@ -0,0 +1,200 @@
+.collage {
+    display: grid;
+    grid-template-columns: repeat(16, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    margin: 0 -14vw;
+    height: 110vw;
+
+    @include bp (sm) {
+        grid-template-columns: repeat(32, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        margin: 0 -140px;
+        height: clamp(400px, 40vw, 800px);
+    }
+
+    .photo-card {
+        --rotation: 0deg;
+        position: relative;
+        display: block;
+        grid-column-end: span 8;
+        height: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        transform: rotate(var(--rotation)) translateZ(0);
+
+        @include bp (sm) {
+            height: clamp(156px, 18vw, 400px);
+        }
+
+        // First row
+        // Mobile: Top left
+        &:nth-child(1) {
+            --rotation: -10.5deg;
+            z-index: 5;
+            grid-column-start: 2;
+            grid-row: 1;
+
+            @include bp (sm) {
+                z-index: 10;
+                top: clamp(24px, 8vw, 128px);
+            }
+        }
+        // Mobile: Middle left
+        &:nth-child(2) {
+            --rotation: 3deg;
+            z-index: 3;
+            grid-column-start: 1;
+            grid-row: 2;
+            margin-top: -10vw;
+            left: -20vw;
+
+            @include bp (sm) {
+                z-index: 7;
+                grid-column-start: 7;
+                grid-row: 1;
+                top: clamp(16px, 3vw, 48px);
+                margin-top: 0;
+                left: 0;
+            }
+        }
+        // Mobile: Middle center
+        &:nth-child(3) {
+            z-index: 4;
+            grid-column-start: 5;
+            grid-row: 2;
+            margin-top: -12vw;
+
+            @include bp (sm) {
+                z-index: 6;
+                grid-column-start: 13;
+                grid-row: 1;
+                margin-top: 0;
+            }
+        }
+        // Mobile: Middle right
+        &:nth-child(4) {
+            --rotation: -3deg;
+            z-index: 3;
+            grid-column-start: 8;
+            grid-row: 2;
+            margin-top: -7vw;
+            left: 20vw;
+
+            @include bp (sm) {
+                z-index: 2;
+                grid-column-start: 19;
+                grid-row: 1;
+                top: clamp(16px, 3vw, 48px);
+                margin-top: 0;
+                left: 0;
+            }
+        }
+        // Mobile: Top right
+        &:nth-child(5) {
+            --rotation: 10.5deg;
+            z-index: 6;
+            grid-column-start: 8;
+            grid-row: 1;
+
+            @include bp (sm) {
+                z-index: 1;
+                top: clamp(24px, 8vw, 128px);
+                grid-column-start: 24;
+            }
+        }
+
+        // Second row
+        &:nth-child(6) {
+            display: none;
+            --rotation: -5.5deg;
+
+            @include bp (sm) {
+                display: block;
+                z-index: 9;
+                grid-column-start: 1;
+                grid-row: 2;
+                top: clamp(24px, 5.5vw, 88px);
+            }
+        }
+        &:nth-child(7) {
+            display: none;
+            --rotation: -8deg;
+
+            @include bp (sm) {
+                display: block;
+                z-index: 8;
+                grid-column-start: 5;
+                grid-row: 2;
+            }
+        }
+        // Mobile: Bottom left
+        &:nth-child(8) {
+            --rotation: 8deg;
+            z-index: 2;
+            grid-column-start: 2;
+            grid-row: 3;
+            margin-top: -16vw;
+
+            @include bp (sm) {
+                z-index: 5;
+                grid-column-start: 11;
+                grid-row: 2;
+                top: calc(-1 * clamp(20px, 3vw, 48px));
+                margin-top: 0;
+            }
+        }
+        // Mobile: Bottom right
+        &:nth-child(9) {
+            --rotation: -2deg;
+            z-index: 1;
+            grid-column-start: 8;
+            grid-row: 3;
+            margin-top: -16vw;
+
+            @include bp (sm) {
+                --rotation: 2deg;
+                z-index: 4;
+                grid-column-start: 15;
+                grid-row: 2;
+                top: calc(-1 * clamp(20px, 3vw, 48px));
+                margin-top: 0;
+            }
+        }
+        &:nth-child(10) {
+            --rotation: 8deg;
+            display: none;
+
+            @include bp (sm) {
+                display: block;
+                z-index: 3;
+                grid-column-start: 21;
+                grid-row: 2;
+            }
+        }
+        &:nth-child(11) {
+            --rotation: 5.5deg;
+            display: none;
+
+            @include bp (sm) {
+                z-index: 2;
+                grid-column-start: 25;
+                grid-row: 2;
+                top: clamp(24px, 5.5vw, 88px);
+                margin-right: 0;
+                display: block;
+            }
+        }
+
+        // Put card in front when hovering
+        &:hover {
+            z-index: 13;
+        }
+
+        // Not hovered
+        &.is-inactive {
+            img {
+                opacity: 0.5;
+            }
+        }
+    }
+}

src/style/pages/_homepage.scss

@@ -104,199 +104,6 @@
             margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px);
         }
     }
-    &__collage {
-        display: grid;
-        grid-template-columns: repeat(16, 1fr);
-        grid-template-rows: repeat(3, 1fr);
-        margin: 0 -14vw;
-        height: 110vw;
-
-        @include bp (sm) {
-            grid-template-columns: repeat(32, 1fr);
-            grid-template-rows: repeat(2, 1fr);
-            margin: 0 -140px;
-            height: clamp(400px, 40vw, 800px);
-        }
-
-        .photo-card {
-            --rotation: 0deg;
-            position: relative;
-            display: block;
-            grid-column-end: span 8;
-            height: 100%;
-            margin-left: auto;
-            margin-right: auto;
-            transform: rotate(var(--rotation)) translateZ(0);
-
-            @include bp (sm) {
-                height: clamp(156px, 18vw, 400px);
-            }
-
-            // First row
-            // Mobile: Top left
-            &:nth-child(1) {
-                --rotation: -10.5deg;
-                z-index: 5;
-                grid-column-start: 2;
-                grid-row: 1;
-
-                @include bp (sm) {
-                    z-index: 10;
-                    top: clamp(24px, 8vw, 128px);
-                }
-            }
-            // Mobile: Middle left
-            &:nth-child(2) {
-                --rotation: 3deg;
-                z-index: 3;
-                grid-column-start: 1;
-                grid-row: 2;
-                margin-top: -10vw;
-                left: -20vw;
-
-                @include bp (sm) {
-                    z-index: 7;
-                    grid-column-start: 7;
-                    grid-row: 1;
-                    top: clamp(16px, 3vw, 48px);
-                    margin-top: 0;
-                    left: 0;
-                }
-            }
-            // Mobile: Middle center
-            &:nth-child(3) {
-                z-index: 4;
-                grid-column-start: 5;
-                grid-row: 2;
-                margin-top: -12vw;
-
-                @include bp (sm) {
-                    z-index: 6;
-                    grid-column-start: 13;
-                    grid-row: 1;
-                    margin-top: 0;
-                }
-            }
-            // Mobile: Middle right
-            &:nth-child(4) {
-                --rotation: -3deg;
-                z-index: 3;
-                grid-column-start: 8;
-                grid-row: 2;
-                margin-top: -7vw;
-                left: 20vw;
-
-                @include bp (sm) {
-                    z-index: 2;
-                    grid-column-start: 19;
-                    grid-row: 1;
-                    top: clamp(16px, 3vw, 48px);
-                    margin-top: 0;
-                    left: 0;
-                }
-            }
-            // Mobile: Top right
-            &:nth-child(5) {
-                --rotation: 10.5deg;
-                z-index: 6;
-                grid-column-start: 8;
-                grid-row: 1;
-
-                @include bp (sm) {
-                    z-index: 1;
-                    top: clamp(24px, 8vw, 128px);
-                    grid-column-start: 24;
-                }
-            }
-
-            // Second row
-            &:nth-child(6) {
-                display: none;
-                --rotation: -5.5deg;
-
-                @include bp (sm) {
-                    display: block;
-                    z-index: 9;
-                    grid-column-start: 1;
-                    grid-row: 2;
-                    top: clamp(24px, 5.5vw, 88px);
-                }
-            }
-            &:nth-child(7) {
-                display: none;
-                --rotation: -8deg;
-
-                @include bp (sm) {
-                    display: block;
-                    z-index: 8;
-                    grid-column-start: 5;
-                    grid-row: 2;
-                }
-            }
-            // Mobile: Bottom left
-            &:nth-child(8) {
-                --rotation: 8deg;
-                z-index: 2;
-                grid-column-start: 2;
-                grid-row: 3;
-                margin-top: -16vw;
-
-                @include bp (sm) {
-                    z-index: 5;
-                    grid-column-start: 11;
-                    grid-row: 2;
-                    top: calc(-1 * clamp(20px, 3vw, 48px));
-                    margin-top: 0;
-                }
-            }
-            // Mobile: Bottom right
-            &:nth-child(9) {
-                --rotation: -2deg;
-                z-index: 1;
-                grid-column-start: 8;
-                grid-row: 3;
-                margin-top: -16vw;
-
-                @include bp (sm) {
-                    --rotation: 2deg;
-                    z-index: 4;
-                    grid-column-start: 15;
-                    grid-row: 2;
-                    top: calc(-1 * clamp(20px, 3vw, 48px));
-                    margin-top: 0;
-                }
-            }
-            &:nth-child(10) {
-                --rotation: 8deg;
-                display: none;
-
-                @include bp (sm) {
-                    display: block;
-                    z-index: 3;
-                    grid-column-start: 21;
-                    grid-row: 2;
-                }
-            }
-            &:nth-child(11) {
-                --rotation: 5.5deg;
-                display: none;
-
-                @include bp (sm) {
-                    z-index: 2;
-                    grid-column-start: 25;
-                    grid-row: 2;
-                    top: clamp(24px, 5.5vw, 88px);
-                    margin-right: 0;
-                    display: block;
-                }
-            }
-
-            // Put card in front when hovering
-            &:hover {
-                z-index: 13;
-            }
-        }
-    }
 
     // CTAS
     &__ctas {

src/style/style.scss

@@ -61,6 +61,7 @@
 @import "molecules/shop-locationswitcher";
 
 // Organisms
+@import "organisms/collage";
 @import "organisms/locations";
 @import "organisms/house";
 @import "organisms/newsletter";