Change Location hover photo change effect

src/components/molecules/Location.svelte

@@ -8,7 +8,6 @@
     import Badge from '$components/atoms/Badge.svelte'
 
     export let location: any
-    export let index: number
 
     const { settings: { limit_new }}: any = getContext('global')
     const { name, slug, country, date_updated } = location
@@ -72,6 +71,7 @@
             {/if}
         </div>
     </a>
+    {#if location.photos.length}
         <div class="location__photos">
             {#each location.photos as photo, index}
                 <Image
@@ -80,4 +80,5 @@
                 />
             {/each}
         </div>
+    {/if}
 </div>

src/style/molecules/_location.scss

@@ -109,7 +109,7 @@
         left: 50%;
         width: 240px;
         height: 160px;
-        background: #444;
+        background: #222;
         border-radius: 6px;
         transform: translate3d(calc(-50% + var(--offset-x)), calc(-50% + var(--offset-y)), 0) rotate(var(--rotate));
         overflow: hidden;
@@ -122,7 +122,13 @@
         }
 
         picture {
-            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transition: opacity 0.3s;
 
             img {
                 display: block;
@@ -132,7 +138,7 @@
             }
 
             &.is-visible {
-                display: block;
+                opacity: 1;
             }
         }
     }