[TASK] progressive loaded images

Packages/chrosey_materialize/css/style.css

@@ -17,6 +17,64 @@ main {
     flex: 1 0 auto;
 }
 
+.progressive {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    outline: none
+}
+
+.progressive img {
+    display: block;
+    width: 100%;
+    max-width: none;
+    height: auto;
+    border: 0
+}
+
+.progressive img.preview {
+    filter: blur(2vw);
+    transform: scale(1.05)
+}
+
+.progressive img.reveal {
+    position: absolute;
+    left: 0;
+    top: 0;
+    will-change: transform, opacity;
+    animation: progressiveReveal 1s ease-out
+}
+
+@keyframes progressiveReveal {
+    0% {
+        transform: scale(1.05);
+        filter: blur(20px);
+        opacity: 0
+    }
+
+    to {
+        transform: scale(1);
+        filter: none;
+        opacity: 1
+    }
+}
+
+picture {
+    width: 100%;
+    /* stretch to fit its containing element */
+    overflow: hidden;
+}
+
+picture img {
+    width: 100%;
+    /* stretch to fill the picture element */
+    transition: filter .5s;
+}
+
+picture.lazy img {
+    filter: blur(20px);
+}
+
 /*
 header,
 main,