HoverCard: Added animations. Button: Persistent shadow when active.

src/lib/components/hover-card.svelte

@@ -1,21 +1,90 @@
 <script>
     import "$lib/css/base.css";
-    import "$lib/css/hover-card.css"
+    import "$lib/css/hover-card.css";
+
+    import anime from "animejs";
+    import { compile } from "svelte/compiler";
+    import SvgIcon from "@jamescoyle/svelte-icon";
+    import { mdiEye } from "@mdi/js";
+
+    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",
+        });
+    }
 </script>
 
-<div class="hover-card-container">
+<div
+    class="hover-card-container"
+    role="button"
+    tabindex="0"
+    on:mouseenter={() => {
+        animateCard(true);
+    }}
+    on:mouseleave={() => {
+        animateCard(false);
+    }}
+>
     <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>

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/cover-img.css

@@ -15,7 +15,7 @@
     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 {
@@ -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;

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/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>