From 7442f9c691e10f2dff20a3b44d5ab4e2c6cd69e8 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Wed, 30 Aug 2023 21:15:54 +0100
Subject: [PATCH] faded image edges

---
 src/assets/css/main.css                  | 13 +++++++------
 src/components/HomeOne/TrafficHomeTwo.js | 17 +++++++++++++++--
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 0d2a225..7166e26 100755
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -3049,16 +3049,16 @@ p {
   position: relative;
   overflow: hidden;
   z-index: 15;
-//background-color: #fbf4fe;
+/* background-color: #fbf4fe; */
 }
-.wrench-on-area .traffic-thumb {
+/* .wrench-on-area .traffic-thumb {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 42%;
-}
-@media (max-width: 767px) {
+} */
+/* @media (max-width: 767px) {
   .wrench-on-area .traffic-thumb {
     display: none;
   }
@@ -3067,11 +3067,12 @@ p {
   .wrench-on-area .traffic-thumb {
     display: none;
   }
-}
+} */
 
 .withFadeEdge{
   border-radius: 10px 10px 10px 10px;
-  box-shadow: inset 0 0 15px 25px white;
+  /* box-shadow: inset 0 0 15px 25px white; */
+  box-shadow: 0 0 10px 20px #fff inset;
 }
 /*===========================
     6.APPIE TRAFFICE css 
diff --git a/src/components/HomeOne/TrafficHomeTwo.js b/src/components/HomeOne/TrafficHomeTwo.js
index 5bb3889..ecc3666 100644
--- a/src/components/HomeOne/TrafficHomeTwo.js
+++ b/src/components/HomeOne/TrafficHomeTwo.js
@@ -35,9 +35,22 @@ function TrafficHomeOne() {
                             </div> */}
             </div>
           </div>
+          <div className="traffic-thumb d-none d-lg-flex col-lg-5 justify-content-center align-items-center">
+            <div className='position-relative d-flex'>
+              <div className='withFadeEdge position-absolute bg-transparent w-100 h-100' style={{zIndex: '1'}}></div>
+                <img
+                  className="position-relative wow animated fadeInRight p-1"
+                  data-wow-duration="2000ms"
+                  data-wow-delay="200ms"
+                  src={thumb}
+                  alt=""
+                  style={{zIndex: '0'}}
+                />
+            </div>
+          </div>
         </div>
       </div>
-      <div className="traffic-thumb ">
+      {/* <div className="traffic-thumb">
         <img
           className="withFadeEdge wow animated fadeInRight"
           data-wow-duration="2000ms"
@@ -45,7 +58,7 @@ function TrafficHomeOne() {
           src={thumb}
           alt=""
         />
-      </div>
+      </div> */}
     </section>
   );
 }