background image transition implementation in extended view

POSUA-NITS · Mar 18, 2024 · 200f778 · 200f778
1 parent aaecda9
commit 200f778
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Alata&family=DM+Serif+Text:ital@0;1&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alata&family=DM+Serif+Display:ital@0;1&family=Outfit:wght@100..900&display=swap"
       rel="stylesheet"
     />
 

diff --git a/src/Pages/Events/Events.jsx b/src/Pages/Events/Events.jsx
@@ -5,29 +5,48 @@ const ExtendedView = ({ mode, current, setCurrent }) => {
   return (
     <div
       className={styles.ExtendedView}
-      style={{ transform: `translateX(${mode * 100}vw)`, transition: "ease 1000ms" }}
+      style={{
+        transform: `translateX(${mode * 100}vw)`,
+        transition: "ease 1000ms",
+        backgroundImage: `url('${data[current - 1].src}')`,
+      }}
     >
-      <div>
-        <h1 className={styles.h1}>{data[current - 1].name}</h1>
-        <p className={styles.description}>{data[current - 1].description}</p>
-        <div className={styles.sliderBtnCont}>
-          {current < data.length && (
-            <button onClick={() => setCurrent(current + 1)} className={styles.sliderBtn}>
-              <img
-                src="https://res.cloudinary.com/dhry5xscm/image/upload/v1710773641/posua/arrow_btn_left_jtj4x2.svg"
-                alt="slide to left"
-              />
-            </button>
-          )}
-          {current > 1 && (
-            <button onClick={() => setCurrent(current - 1)} className={styles.sliderBtn}>
-              <img
-                src="https://res.cloudinary.com/dhry5xscm/image/upload/v1710773630/posua/arrow_btn_right_c3iviw.svg"
-                alt="slide to right"
-              />
-            </button>
-          )}
+      <div className={styles.innerFilter}>
+        <div className={styles.writtenContent}>
+          <h1 className={styles.h1}>{data[current - 1].name}</h1>
+          <p className={styles.description}>{data[current - 1].description}</p>
+          <div className={styles.sliderBtnCont}>
+            {current < data.length && (
+              <button
+                onClick={() => setCurrent(current + 1)}
+                className={styles.sliderBtn}
+              >
+                <img
+                  src="https://res.cloudinary.com/dhry5xscm/image/upload/v1710773641/posua/arrow_btn_left_jtj4x2.svg"
+                  alt="slide to left"
+                />
+              </button>
+            )}
+            {current > 1 && (
+              <button
+                onClick={() => setCurrent(current - 1)}
+                className={styles.sliderBtn}
+              >
+                <img
+                  src="https://res.cloudinary.com/dhry5xscm/image/upload/v1710773630/posua/arrow_btn_right_c3iviw.svg"
+                  alt="slide to right"
+                />
+              </button>
+            )}
+          </div>
         </div>
+        {/* <div className={styles.carouselParent}>
+          {
+            data.map((item) => {
+              <h1>hello{item.id}</h1>
+            })
+          }
+        </div> */}
       </div>
     </div>
   );

diff --git a/src/Pages/Events/Events.module.scss b/src/Pages/Events/Events.module.scss
@@ -1,5 +1,4 @@
 .superParent {
-  overflow: hidden;
   overflow-x: hidden;
   background-image: url("https://res.cloudinary.com/dhry5xscm/image/upload/v1710752499/posua/events_bg_right_bottom_g4esfr.svg"),
     url("https://res.cloudinary.com/dhry5xscm/image/upload/v1710752495/posua/events_bg_right_b3obln.svg"),
@@ -72,5 +71,42 @@
     min-height: 100%;
     min-width: 100vw;
     color: #ffffff;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+
+    .innerFilter {
+      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+      min-height: 100vh;
+
+      .writtenContent {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        justify-content: space-around;
+        width: 30%;
+        margin: 25vh 4rem;
+
+        .h1 {
+          font-family: "Abril Fatface", sans-serif;
+          font-weight: 400;
+          font-size: 3.2rem;
+        }
+
+        .description {
+          font-family: "Alata", sans-serif;
+          font-weight: 400;
+          font-size: 1rem;
+        }
+      }
+
+      .carouselParent {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        background-color: red;
+      }
+    }
   }
 }