Added basic <Popup/>.

src/lib/components/hover-card.svelte

@@ -1,21 +1,100 @@
 <script>
     import "$lib/css/base.css";
-    import "$lib/css/hover-card.css"
+    import "$lib/css/hover-card.css";
+
+    import anime from "animejs";
+    import SvgIcon from "@jamescoyle/svelte-icon";
+    import { mdiEye } from "@mdi/js";
+    import { popupComponent } from "$lib/ts/popup.ts";
+    import HoverCardPopup from "$lib/components/popup/hover-card.svelte";
+
+    import text from "$lib/json/hover-card.json";
 
     export let picture;
     export let title = "Title";
-    export let description = "This is a description, you can add some explaination to your picture in here!";
+    export let description =
+        "This is a description, you can add some explaination to your picture in here!";
+
+    let divHoverCardOverlay;
+    let divHoverCardMetadata = {
+        div: null,
+        title: null,
+        description: null,
+        tip: null,
+    };
+    function animateCard(isEntering) {
+        const opacityValues = [0, 1];
+        let translateValues = [-30, 0];
+
+        if (!isEntering) {
+            opacityValues.reverse();
+            translateValues.reverse();
+        }
+
+        anime({
+            targets: [divHoverCardOverlay, divHoverCardMetadata.div],
+            opacity: opacityValues,
+            duration: 400,
+            easing: "easeInOutQuad",
+        });
+        anime({
+            targets: [divHoverCardMetadata.title, divHoverCardMetadata.tip],
+            opacity: opacityValues,
+            translateX: translateValues,
+            delay: 100,
+            duration: 500,
+            easing: "easeInOutQuad",
+        });
+        translateValues = translateValues.map((e) => -e);
+        anime({
+            targets: [divHoverCardMetadata.description],
+            opacity: opacityValues,
+            translateY: translateValues,
+            delay: 100,
+            duration: 500,
+            easing: "easeInOutQuad",
+        });
+    }
+
+    function showPopup() {
+        popupComponent.set({
+            component: HoverCardPopup,
+            props: { title: "Hello", description: "This is a custom Popup" },
+        });
+    }
 </script>
 
-<div class="hover-card-container">
+<div
+    class="hover-card-container"
+    role="button"
+    tabindex="0"
+    on:mouseenter={() => {
+        animateCard(true);
+    }}
+    on:mouseleave={() => {
+        animateCard(false);
+    }}
+    on:click={showPopup}
+    on:keydown={(e) => e.key === "Enter" && showPopup()} 
+>
     <div class="hover-card">
         <img alt="hover-card" src={picture} />
     </div>
-    <div class="hover-card-overlay"></div>
+    <div class="hover-card-overlay" bind:this={divHoverCardOverlay}></div>
-    <div class="hover-card flex-row">
+    <div class="hover-card flex-col">
-        <div class="hover-card-metadata margin-bot-force">
+        <div
-            <h1>{title}</h1>
+            class="hover-card-tip flex-row"
-            <p>{description}</p>
+            bind:this={divHoverCardMetadata.tip}
+        >
+            <SvgIcon type="mdi" path={mdiEye}></SvgIcon>
+            <span>{text.seemore}</span>
+        </div>
+        <div
+            class="hover-card-metadata margin-bot-force"
+            bind:this={divHoverCardMetadata.div}
+        >
+            <h1 bind:this={divHoverCardMetadata.title}>{title}</h1>
+            <p bind:this={divHoverCardMetadata.description}>{description}</p>
         </div>
     </div>
-</div>
+</div>

src/lib/components/popup.svelte

@@ -0,0 +1,26 @@
+<script>
+    import "$lib/css/popup.css";
+    import { popupComponent } from "$lib/ts/popup.ts";
+
+    let component = null;
+
+    popupComponent.subscribe((value) => {
+        component = value;
+    });
+
+    function close() {
+        popupComponent.set(null);
+    }
+</script>
+
+{#if component}
+    <div
+        class="popup"
+        role="button"
+        tabindex="0"
+        on:click={close}
+        on:keydown={(e) => e.key === "Escape" && close()}
+    >
+        <svelte:component this={component.component} {...component.props} />
+    </div>
+{/if}

src/lib/components/popup/hover-card.svelte

@@ -0,0 +1,11 @@
+<script>
+    import "$lib/css/hover-card.css"
+
+    export let title=""
+    export let description=""
+</script>
+
+<div class="hover-card-popup-container">
+    <h1>{title}</h1>
+    <p>{description}</p>
+</div>

src/lib/css/base.css

@@ -44,6 +44,7 @@ h2 {
     --background-dark: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(224, 217, 217, 1) 100%);
     --shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
     --shadow-hover: rgba(43, 33, 48, 0.5) 0px 22px 70px 4px;
+    --shadow-active: #2c1235a0 0px 20px 30px -10px;
     --z-index-last: -1;
     --z-index-normal: 0;
     --z-index-front: 1;

src/lib/css/button.css

@@ -3,13 +3,13 @@
     border: none;
     cursor: pointer;
     background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
-    box-shadow: 0px 8px 18px -1px #33283760;
     padding: 0.2rem;
     transition: var(--transition);
+    box-shadow: var(--shadow);
 }
 
 .button:active {
-    box-shadow: 0px 4px 10px 0px #2c1235b0;
+    box-shadow: var(--shadow-active);
     transform: translateY(3px);
 }
 

src/lib/css/carousel.css

@@ -18,7 +18,7 @@
     box-shadow: #00000040 0px 8px 18px -1px;
     transition: all .1s ease 0s;
     background-color: var(--color-background);
-    z-index: 2;
+    z-index: var(--z-index-normal);
     margin-right: 1rem;
     margin-top: 2rem;
     margin-bottom: 2rem;

src/lib/css/cover-img.css

@@ -15,13 +15,13 @@
     background: linear-gradient(0deg, #00000000, #261C2C40 50%, #261c2c80 100%);
     height: calc(var(--navbar-height)*2);
     width: 100%;
-    z-index: 0;
+    z-index: var(--z-index-normal);
 }
 
 .cover-img-text {
     grid-area: overlay;
     padding: 4rem;
-    z-index: 1;
+    z-index: var(--z-index-normal);
     max-width: 50rem;
 }
 
@@ -44,7 +44,7 @@
 .cover-img-darken {
     grid-area: overlay;
     background-color: rgb(0, 0, 0, 0.35);
-    z-index: 0;
+    z-index: var(--z-index-normal);
     border-bottom-left-radius: 2rem;
     border-bottom-right-radius: 2rem;
 }

src/lib/css/hover-card.css

@@ -20,6 +20,11 @@
     box-shadow: var(--shadow-hover);
 }
 
+.hover-card-container:active {
+    transform: translateY(0.3rem) scale(100%);
+    box-shadow: var(--shadow-active);
+}
+
 .hover-card-container img {
     width: 100%;
     height: 100%;
@@ -36,16 +41,45 @@
     grid-area: overlay;
     width: 100%;
     height: 100%;
-    background-image: linear-gradient(0deg, #120e14 0%, #120e14dc 30%, #120e1491 35%, rgba(0,0,0,0) 45%);
+    background-image: linear-gradient(0deg, #120e14 0%, #120e14dc 30%, #120e1491 35%, rgba(0, 0, 0, 0) 45%);
+    opacity: 0;
+}
+
+.hover-card-tip {
+    color: var(--color-background);
+    background-color: #120e14b0;
+    width: fit-content;
+    margin: 0.4rem;
+    padding: 0.4rem;
+    padding-right: 0.6rem;
+    padding-left: 0.6rem;
+    border-radius: 3rem;
+    box-shadow: var(--shadow);
+    opacity: 0;
+}
+
+.hover-card-tip svg {
+    width: 1.4rem;
+    height: auto;
+}
+
+.hover-card-tip span {
+    font-family: 'JetBrains Mono';
+    font-weight: 400;
+    font-size: 0.8rem;
+    margin-left: 0.5rem;
 }
 
 .hover-card-metadata {
     width: 100%;
     height: 7rem;
     color: var(--color-background);
+    opacity: 0;
 }
 
 .hover-card-metadata h1 {
+    /* Animation */
+    opacity: 0;
     font-family: 'JetBrains Mono';
     font-weight: 800;
     font-size: 1.3rem;
@@ -62,6 +96,8 @@
 }
 
 .hover-card-metadata p {
+    /* Animation */
+    opacity: 0;
     font-family: 'JetBrains Mono';
     font-weight: 400;
     font-style: italic;
@@ -75,4 +111,16 @@
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     line-clamp: 2;
+}
+
+/* Pop-up Hover Card */
+
+.hover-card-popup-container {
+    width: calc(100% - 12rem);
+    height: calc(100% - 12rem);
+    margin: 5rem;
+    padding: 1rem;
+    background-image: var(--background-dark);
+    border-radius: 1rem;
+    box-shadow: var(--shadow);
 }

src/lib/css/navbar.css

@@ -12,7 +12,7 @@ nav {
     height: var(--navbar-height);
     width: 100%;
     position: fixed;
-    z-index: 5;
+    z-index: var(--z-index-navbar);
     transition: var(--transition);
     padding-top: 0.5rem;
 }
@@ -59,7 +59,7 @@ a {
 
 .navbar-content {
     grid-area: overlay;
-    z-index: 1;
+    z-index: var(--z-index-normal);
     width: inherit;
     display: flex;
 }

src/lib/css/popup.css

@@ -0,0 +1,15 @@
+:root {
+    --popup-blur: blur(1rem);
+}
+
+.popup {
+    width: 100dvw;
+    height: 100dvh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: #150f1aa0;
+    z-index: var(--z-index-popup);
+    -webkit-backdrop-filter: var(--popup-blur);
+    backdrop-filter: var(--popup-blur);
+}

src/lib/css/search.css

@@ -40,7 +40,7 @@
     box-shadow: var(--shadow);
     border-radius: 1rem;
     position: absolute !important;
-    z-index: 1;
+    z-index: var(--z-index-normal);
     transform: translateX(-1rem);
     display: none;
     opacity: 0;

src/lib/json/hover-card.json

@@ -0,0 +1,3 @@
+{
+    "seemore": "Voir plus"
+}

src/lib/json/hub.json

@@ -50,13 +50,19 @@
     },
     "photos": [
         {
-            "url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728150532.jpg"
+            "url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728150532.jpg",
+            "title": "Tarnished Peak (afterwar)",
+            "description": "Photo prise à Ben More, Écosse"
         },
         {
-            "url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728142327.jpg"
+            "url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728142327.jpg",
+            "title": "Whitewashed",
+            "description": "Photo prise à Ben More, Écosse"
         },
         {
-            "url": "https://share.etheryo.fr/rando/2023.11.01/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
+            "url": "https://share.etheryo.fr/rando/2023.11.01/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg",
+            "title": "Compagnons",
+            "description": "Photo prise au Lac d'Oô, France"
         }
     ]
 }

src/lib/ts/popup.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const popupComponent = writable(null);

src/routes/+layout.svelte

@@ -1,14 +1,17 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from "$app/stores";
-	import '$lib/css/base.css';
+	import "$lib/css/base.css";
-	import '$lib/css/navbar.css';
+	import "$lib/css/navbar.css";
+	import "$lib/css/popup.css";
 
-	import Navbar from '$lib/components/navbar.svelte';
+	import Navbar from "$lib/components/navbar.svelte";
-	import Footer from '$lib/components/footer.svelte';
+	import Footer from "$lib/components/footer.svelte";
+	import Popup from "$lib/components/popup.svelte";
 
 	// $: pageUrl = $page.url.pathname;
 </script>
 
+<Popup />
 <Navbar />
 <div class="base">
 	<slot />

src/routes/+page.svelte

@@ -70,7 +70,11 @@
 	</div>
 	<div class="flex w-100 justify-center">
 		{#each hubjson.photos as photo}
-			<HoverCard picture={photo.url} />
+			<HoverCard
+				picture={photo.url}
+				title={photo.title}
+				description={photo.description}
+			/>
 		{/each}
 	</div>
 </div>