Add link to Poster component and make a better hover

Buttons are now under the image, creating a parallax scale effect
2021-11-05 12:57:15 +01:00
parent b8d1d6334c
commit 2e05f00b68
2 changed files with 30 additions and 22 deletions
--- a/src/components/molecules/Poster.svelte
+++ b/src/components/molecules/Poster.svelte
@@ -8,17 +8,19 @@

 <div class="poster">
    {#if image}
-        <Image
-            id={image.id}
-            sizeKey="product"
-            sizes={{
-                small: { width: 326 },
-                medium: { width: 326 },
-                large: { width: 326 },
-            }}
-            ratio={1.5}
-            alt="Poster of {location.name}"
-        />
+        <a href="/shop/poster-{location.slug}">
+            <Image
+                id={image.id}
+                sizeKey="product"
+                sizes={{
+                    small: { width: 326 },
+                    medium: { width: 326 },
+                    large: { width: 326 },
+                }}
+                ratio={1.5}
+                alt="Poster of {location.name}"
+            />
+        </a>
    {/if}
    <div class="buttons">
        <Button