Add hover effect on Homepage collage PhotoCard

src/components/molecules/PhotoCard.svelte

@@ -4,6 +4,8 @@
     export let id: string
     export let alt: string
     export let url: string = undefined
+    export let title: string = undefined
+    export let location: any = undefined
 
     const sizes = {
         small: { width: 224 },
@@ -14,15 +16,27 @@
 
 <div class="photo-card">
     {#if url}
-    <a href={url}>
-        <Image
-            id={id}
-            sizeKey="postcard"
-            {sizes}
-            ratio={1.5}
-            alt={alt}
-        />
-    </a>
+        <a href={url}>
+            <Image
+                id={id}
+                sizeKey="postcard"
+                {sizes}
+                ratio={1.5}
+                alt={alt}
+            />
+            {#if title && location}
+                <div class="photo-card__info">
+                    <Image
+                        id={location.country.flag.id}
+                        sizeKey="square"
+                        width={24}
+                        height={24}
+                        alt="Flag of {location.country.name}"
+                    />
+                    <p>{title} - {location.name}, {location.city ? `, ${location.city}, ` : ''}{location.country.name}</p>
+                </div>
+            {/if}
+        </a>
     {:else}
         <Image
             id={id}