Improve blur-up effect

dnadesign · Apr 22, 2019 · c1a7056 · c1a7056
1 parent a8ae436
commit c1a7056
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/client/css/lazysizes-blur.css b/client/css/lazysizes-blur.css
@@ -1,10 +1,15 @@
+.lazyload-container {
+  height: 100%;
+  overflow: hidden;
+}
+
 .blur-up {
-  -webkit-filter: blur(5px);
-          filter: blur(5px);
-  -webkit-transition: -webkit-filter 400ms;
-  transition: -webkit-filter 400ms;
-  transition: filter 400ms;
-  transition: filter 400ms, -webkit-filter 400ms;
+  -webkit-filter: blur(40px);
+          filter: blur(40px);
+  -webkit-transition: -webkit-filter 800ms;
+  transition: -webkit-filter 800ms;
+  transition: filter 800ms;
+  transition: filter 800ms, -webkit-filter 800ms;
 }
 
 .blur-up.lazyloaded {

diff --git a/src/templates/Includes/LazyloadedImage.ss b/src/templates/Includes/LazyloadedImage.ss
@@ -1,6 +1,8 @@
-<img
-  class="lazyload blur-up"
-  src="$LQIP.URL"
-  data-src="$URL.ATT"
-  alt="$Title.ATT"
-/>
+<div class="lazyload-container">
+  <img
+    class="lazyload blur-up"
+    src="$LQIP.URL"
+    data-src="$URL.ATT"
+    alt="$Title.ATT"
+  />
+</div>