From 436772502be235e04994e536fbb1c837dabdbcc6 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Sat, 21 Mar 2026 12:42:32 +0100
Subject: [PATCH] portfolio gallery animation : decrease opacity - related to
 #20

---
 src/components/ui/GalleryAnimation.svelte | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/GalleryAnimation.svelte b/src/components/ui/GalleryAnimation.svelte
index 67054ec..f11162e 100644
--- a/src/components/ui/GalleryAnimation.svelte
+++ b/src/components/ui/GalleryAnimation.svelte
@@ -31,6 +31,7 @@
   class="gallery-animation gallery-animation--vertical"
   style="--gallery-duration: {columns[0]?.duration ?? 24}s{backgroundColor ? `; --background-color: ${backgroundColor}` : ''}{backgroundImage ? `; --background-image: url(${backgroundImage})` : ''}"
 >
+<div class="gallery-animation__overlay"></div>
   {#each columns as col}
     <div class="gallery-animation__column">
       <div
@@ -62,11 +63,13 @@
 
 <style>
   .gallery-animation {
+    position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
     background-color: var(--background-color, transparent);
     background-image: var(--background-image);
+    opacity: .7;
   }
 
   /* Vertical mode (Portfolio) */
@@ -74,6 +77,7 @@
     display: flex;
     flex-direction: row;
     gap: 1rem;
+    transform: scale(1.2);
   }
 
   .gallery-animation--vertical :global(.gallery-animation__column) {
@@ -92,15 +96,22 @@
   }
 
   .gallery-animation--vertical :global(.gallery-animation__column:nth-child(odd) .gallery-animation__track) {
-    animation-name: galleryScrollUp;
+    animation-name: galleryScrollDown;
     animation-duration: var(--gallery-duration);
   }
 
   .gallery-animation--vertical :global(.gallery-animation__column:nth-child(even) .gallery-animation__track) {
-    animation-name: galleryScrollDown;
+    animation-name: galleryScrollUp;
     animation-duration: var(--gallery-duration);
   }
 
+  /* .gallery-animation__overlay {
+    position: absolute;
+    inset: 0;
+    background-color: #000;
+    opacity: .5;
+  } */
+
   :global(.gallery-animation__image) {
     width: 100%;
     height: auto;