Added black fading block to the left of pictures

WISVCH · Dec 4, 2023 · 1168cc0 · 1168cc0
1 parent e23e0f2
commit 1168cc0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/components/photos/index.tsx b/src/components/photos/index.tsx
@@ -53,14 +53,13 @@ export const Photos: FunctionalComponent = () => {
     return (
         <section class={style.photos}>
             <h2>Photos</h2>
-            <p>
-                Take a look at a previous edition to get an impression of the event.
-            </p>
             <div
                 ref={gallery}
                 class={style.gallery}
                 onClick={() => (shouldAnimate.current = false)}
             >
+                <div class={style.block}></div>
+
                 {photosMap.map((url) => (
                     <Photo url={url} />
                 ))}

diff --git a/src/components/photos/style.scss b/src/components/photos/style.scss
@@ -20,10 +20,23 @@
     }
 }
 
+.block {
+    position: absolute; 
+    margin-top: -120px;
+    margin-left: 120px;
+    display: block;
+    width: 260px; 
+    height: 500px; 
+    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 50%);
+    z-index: 2; 
+    transform: rotate(-90deg);
+  }
+
+
 .gallery {
     display: flex;
     overflow-x: scroll;
-    gap: 12px;
+    gap: 8px;
     scrollbar-width: auto;
     scrollbar-color: $primary-color $background-color;
 
@@ -38,6 +51,8 @@
     &::-webkit-scrollbar-thumb {
         background-color: $primary-color;
     }
+
+
 }
 
 .image {
@@ -47,7 +62,6 @@
         height: 260px;
         width: 400px;
         object-fit: cover;
-        border-radius: 6px;
     }
 }