From 3a41414c703c85b877d09b1cdf2e091d249ee8ee Mon Sep 17 00:00:00 2001
From: Padmaja <52911293+padms@users.noreply.github.com>
Date: Fri, 2 Feb 2024 17:26:36 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Gradient=20#2014?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Backgrounds/ImageBackgroundContainer.tsx  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/web/components/src/Backgrounds/ImageBackgroundContainer.tsx b/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
index ae51e62cf..aa4494ab5 100644
--- a/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
+++ b/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
@@ -26,7 +26,13 @@ const DEFAULT_MAX_WIDTH = 1920
 
 const AnimationWrapper = styled.div`
   /* Create View Timeline */
-  //height: 100vh;
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1) 70%);
+  section {
+    width: 40vw;
+    margin-right: 0;
+    padding: var(--space-3xLarge) var(--space-3xLarge);
+  }
+  display: flex;
   view-timeline-name: --revealing-image;
   view-timeline-axis: block;
 
@@ -35,14 +41,21 @@ const AnimationWrapper = styled.div`
   animation-timeline: --revealing-image;
 
   /* Tweak range when effect should run*/
-  animation-range: entry 25% cover 50%;
+  animation-range: cover 0% cover 100%;
+
   @keyframes fadeIn {
     0% {
       opacity: 0;
     }
-    100% {
+    20% {
+      opacity: 1;
+    }
+    80% {
       opacity: 1;
     }
+    100% {
+      opacity: 0;
+    }
   }
 `
 export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgroundContainerProps>(