Make images fade in as they load

2024-05-12 03:18:55 +01:00
parent 82f51293df
commit 4beab6bcec
2 changed files with 40 additions and 0 deletions
--- a/internal/assets/static/main.css
+++ b/internal/assets/static/main.css
@@ -217,6 +217,18 @@ img, svg {
    max-width: 100%;
 }

+img[loading=lazy].loaded:not(.finished-transition) {
+    transition: opacity .4s;
+}
+
+img[loading=lazy].cached:not(.finished-transition) {
+    transition: none;
+}
+
+img[loading=lazy]:not(.loaded, .cached) {
+    opacity: 0;
+}
+
 html {
    scrollbar-color: var(--color-text-subdue) transparent;
    scroll-behavior: smooth;