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