faded image edges

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 

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>
   );
 }