refactor: Change blur image to be implemented in CSS

assets/scripts/scroll-effect.js

@@ -1,5 +1,5 @@
 $(window).on("scroll", function (e) {
-  oVal = $(window).scrollTop() / 170;
-  $(".blur").css("opacity", oVal);
+  oVal = $(window).scrollTop() / 75;
+  $(".blurred-container .img-src").css("filter", "blur(" + oVal + "px)");
 });
 $("#motto").fitText();

assets/styles/mix-twbs.scss

@@ -48,10 +48,6 @@ $peek-height: 25rem;
   background-position: center center;
 }
 
-.blur {
-  opacity: 0;
-}
-
 .list-main {
   position: relative;
   background-color: #fff;

layouts/partials/scrolling-image-header.html

@@ -7,14 +7,9 @@
   </div>
   {{ $imgsrc := print "images/" (.Param "cardImage") ".jpg" }}
   {{ $mainimg := resources.Get $imgsrc }}
-  {{ $blurimg := $mainimg.Filter (images.GaussianBlur 100) }}
   <div
     class="img-src"
     style="background-image: url('{{ $mainimg.RelPermalink }}');"
   ></div>
-  <div
-    class="img-src blur"
-    style="background-image: url('{{ $blurimg.RelPermalink }}');"
-  ></div>
 </div>
 <br />