From 7c4d890706827f70ebb206c93b245bebe585aad1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 25 Oct 2021 23:44:45 +0200
Subject: [PATCH] Add hover effect on Homepage collage PhotoCard

---
 src/components/molecules/PhotoCard.svelte | 32 +++++---
 src/routes/index.svelte                   | 22 ++++--
 src/style/molecules/_photo-card.scss      | 92 ++++++++++++++++++++++-
 src/style/pages/_homepage.scss            | 21 ------
 4 files changed, 128 insertions(+), 39 deletions(-)

diff --git a/src/components/molecules/PhotoCard.svelte b/src/components/molecules/PhotoCard.svelte
index 6fe81d8..caae2fe 100644
--- a/src/components/molecules/PhotoCard.svelte
+++ b/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}
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 098ac5d..401cec4 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -40,11 +40,13 @@
 
     <section class="homepage__photos">
         <div class="homepage__collage">
-            {#each photos as { slug, location: { slug: locationSlug, country }, image: { id, title } }}
+            {#each photos as { slug, title, image, location }}
                 <PhotoCard
-                    id={id}
+                    id={image.id}
                     alt={title}
-                    url="/{country.slug}/{locationSlug}/{slug}"
+                    url="/{location.country.slug}/{location.slug}/{slug}"
+                    title={title}
+                    location={location}
                 />
             {/each}
         </div>
@@ -101,14 +103,18 @@
             query {
                 photo (limit: 11, sort: ["-date_created"]) {
                     slug
+                    title
+                    city
                     location {
+                        name
                         slug
-                        country { slug }
-                    }
-                    image {
-                        id
-                        title
+                        country {
+                            slug
+                            name
+                            flag { id }
+                        }
                     }
+                    image { id }
                 }
             }
         `)
diff --git a/src/style/molecules/_photo-card.scss b/src/style/molecules/_photo-card.scss
index 2978843..bd3e879 100644
--- a/src/style/molecules/_photo-card.scss
+++ b/src/style/molecules/_photo-card.scss
@@ -2,9 +2,18 @@
     picture {
         width: 100%;
         height: 100%;
-        overflow: hidden;
+        background: $color-primary-tertiary20;
+    }
+    & > * {
         border-radius: 8px;
+    }
+    a {
+        display: block;
+        overflow: hidden;
+        cursor: zoom-in;
         box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2);
+        transition: transform 0.7s var(--ease-quart);
+        will-change: transform;
     }
     img {
         display: block;
@@ -12,4 +21,85 @@
         height: 100%;
         object-fit: cover;
     }
+
+    // Informations
+    &__info {
+        position: absolute;
+        z-index: 2;
+        bottom: 16px;
+        left: 20px;
+        right: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        color: $color-cream;
+        font-size: clamp(#{rem(14px)}, 1.25vw, #{rem(16px)});
+
+        picture {
+            width: 24px;
+            height: 24px;
+            margin-right: 16px;
+            border-radius: 100%;
+            overflow: hidden;
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+        p {
+            max-width: min(80%, 300px);
+            line-height: 1.4;
+        }
+
+        & > * {
+            opacity: 0;
+            transform: translate3d(0, 8px, 0);
+            transition: opacity 0.8s var(--ease-quart), transform 0.8s var(--ease-quart);
+
+            @include bp (md) {
+                transform: translate3d(0, 16px, 0);
+            }
+        }
+    }
+
+    // Gradient
+    a:after {
+        content: "";
+        display: block;
+        opacity: 0;
+        position: absolute;
+        z-index: 1;
+        pointer-events: none;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 50%;
+        background: linear-gradient(180deg, rgba(#2D1745, 0) 0%, #2D1745 100%);
+        transition: opacity 0.8s var(--ease-quart);
+    }
+
+    // Slightly zoom in and show info on hover
+    @media (hover: hover) {
+        a:hover {
+            transform: scale(1.0375) rotate(2deg) translateZ(0);
+
+            .photo-card__info {
+                & > * {
+                    opacity: 1;
+                    transform: translate3d(0,0,0);
+                }
+                picture {
+                    transition-delay: 60ms;
+                }
+                p {
+                    transition-delay: 120ms;
+                }
+            }
+            &:after {
+                opacity: 1;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 354dedd..1d2d5dc 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -110,22 +110,6 @@
                 height: clamp(156px, 18vw, 400px);
             }
 
-            picture {
-                background: $color-primary-tertiary20;
-            }
-            img {
-                display: block;
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            }
-            a {
-                display: block;
-                cursor: zoom-in;
-                transition: transform 0.7s var(--ease-quart);
-                will-change: transform;
-            }
-
             // First row
             // Mobile: Top left
             &:nth-child(1) {
@@ -290,11 +274,6 @@
                 z-index: 13;
             }
         }
-
-        // Slightly zoom in on hover
-        a:hover {
-            transform: scale(1.0375) rotate(2deg) translateZ(0);
-        }
     }
 
     // CTAS