From 77c19ff43f2f53a3aa11d7ff4b03431226b93ecd Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Fri, 1 Oct 2021 23:43:26 +0200
Subject: [PATCH] Add images inside of Location hover effect

---
 src/components/molecules/Location.svelte |  9 +++++++--
 src/routes/__layout.svelte               |  6 ++++++
 src/style/molecules/_location.scss       | 15 +++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index adc121c..fb10132 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -50,7 +50,7 @@
 </script>
 
 <div class="location" role="listitem" bind:this={locationEl}
-    style="--offset-x: {$offset.x}px; --offset-y: {$offset.y}px; --rotate: {$offset.x * 0.15}deg"
+    style="--offset-x: {$offset.x}px; --offset-y: {$offset.y}px; --rotate: {$offset.x * 0.125}deg"
 >
     <a href="/{country.slug}/{slug}"
         on:mousemove={handleMouseMove}
@@ -73,6 +73,11 @@
         </div>
     </a>
     <div class="location__photos">
-        <span>{photoIndex}</span>
+        {#each location.photos as photo, index}
+            <Image
+                class={index === photoIndex ? 'is-visible' : null}
+                id={photo.image.id} alt={photo.image.title} width={240} height={160} quality={70}
+            />
+        {/each}
     </div>
 </div>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 19daacd..be94a91 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -36,6 +36,12 @@
                         }
                     }
                     date_updated
+                    photos (sort: "-date_created", limit: 4) {
+                        image {
+                            id
+                            title
+                        }
+                    }
                 }
 
                 country {
diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss
index b57fd7e..ca83843 100644
--- a/src/style/molecules/_location.scss
+++ b/src/style/molecules/_location.scss
@@ -120,6 +120,21 @@
         @include bp (sm) {
             display: block;
         }
+
+        picture {
+            display: none;
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            &.is-visible {
+                display: block;
+            }
+        }
     }
 
     &:hover {