add image fade in

assets/css/src/generic.css

@@ -187,3 +187,17 @@
 .event-card:hover .image-cover {
   opacity: 0;
 }
+
+img,
+picture svg.hide {
+  opacity: 0;
+}
+picture.hide {
+  background-color: transparent;
+}
+img {
+  transition: var(--transition-image-opacity);
+}
+img.show {
+  opacity: 1;
+}

assets/js/functions.js

@@ -21,4 +21,18 @@ function closeNav(nodes) {
   nodes.main.removeEventListener("click", handleClick);
 }
 
-export { expandNav, closeNav };
+function show(image) {
+  image.classList.add("show");
+  let svg;
+  try {
+    if ((svg = image.nextElementSibling)) {
+      svg.classList.add("hide");
+      image.parentNode.classList.add("hide");
+    }
+  } catch (error) {
+    console.log(error);
+    console.log(image);
+  }
+}
+
+export { expandNav, closeNav, show };

assets/js/script.js

@@ -1,4 +1,4 @@
-import { expandNav, closeNav } from "./functions.js";
+import { expandNav, closeNav, show } from "./functions.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   // Variables
@@ -10,6 +10,7 @@ document.addEventListener("DOMContentLoaded", () => {
     footer: document.querySelector(".main-footer"),
     nav: document.querySelector(".main-nav"),
     jsLinks: document.querySelectorAll(".js-link"),
+    images: document.querySelectorAll("img"),
   };
 
   // Listeners
@@ -20,6 +21,16 @@ document.addEventListener("DOMContentLoaded", () => {
     jsLink.addEventListener("click", () => (location.href = to));
   });
 
+  nodes.images.forEach((image) => {
+    if (image.complete) {
+      show(image);
+    } else {
+      image.addEventListener("load", () => {
+        show(image);
+      });
+    }
+  });
+
   // Key shortcuts
   window.addEventListener("keyup", (event) => {
     if (event.key === "Escape") {