bg blur

src/components/main/ContentItem.tsx

@@ -1,30 +1,32 @@
 // Modules
-import { LazyLoadImage } from "react-lazy-load-image-component";
-import { Link } from "react-router-dom";
-import placeholder from "../../assets/images/placeholder.webp";
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Link } from 'react-router-dom';
+import placeholder from '../../assets/images/placeholder.webp';
 
 interface IProps {
-  type?: "small" | "big";
+  type?: 'small' | 'big';
   img: string;
   title: string;
   id: number;
 }
 
-const ContentItem = ({ type = "small", img, title, id }: IProps) => {
+const ContentItem = ({ type = 'small', img, title, id }: IProps) => {
   return (
-    <div className={`main-content-item main-content-item__${type}`}>
+    <div
+      className={`main-content-item main-content-item__${type}`}
+      style={{
+        backgroundImage: `url(${img})`,
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+      }}>
       <LazyLoadImage
         src={img}
         alt={img}
         effect="opacity"
         useIntersectionObserver
         placeholderSrc={placeholder}
-        style={{
-          backgroundImage: `url(${img})`,
-          backgroundRepeat: "no-repeat",
-          backgroundSize: "cover",
-        }}
       />
+      <div className="bg-blur"></div>
       <Link to={`/news/${id}`} className="main-content-item-overlay">
         <h2>{title}</h2>
       </Link>

src/styles/_main.scss

@@ -27,6 +27,22 @@
   @include wh100;
   overflow: hidden;
 
+  .bg-blur {
+    backdrop-filter: blur(0.3rem);
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    width: 98%;
+    transform: translateX(-50%);
+  }
+
+  img {
+    position: relative;
+    z-index: 3;
+  }
+
   span {
     display: block !important;
     @include wh100;
@@ -42,15 +58,11 @@
     top: 0;
     left: 0;
     @include wh100;
-    background: linear-gradient(
-      180deg,
-      rgba(0, 0, 0, 0) 50%,
-      rgba(0, 0, 0, 0.7) 100%
-    );
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
     display: flex;
     padding: 1.6rem;
     align-items: flex-end;
-    z-index: 2;
+    z-index: 4;
 
     h2 {
       color: $white;