Added ermine, alt text

src/main.ts

@@ -1,22 +1,23 @@
+import sunsetfourteenth from "/14thstsunrise.gif";
 import backwalkgeorge from "/backwalkgeorge.jpg";
+import ducklings from "/ducklings.gif";
+import ermine from "/ermine.gif";
+import fieldnotes from "/fieldnotes.gif";
+import flowers from "/flowers.jpg";
+import georgerasp from "/georgerasp.gif";
 import georgetoilet from "/georgetoilet.jpg";
+import heron from "/heron.jpg";
 import klinefloor from "/klinefloor.jpg";
 import klinemirror from "/klinemirror.jpg";
 import klineoutside from "/klineoutside.jpg";
 import klinetrain from "/klinetrain.jpg";
+import lamp from "/lamp.gif";
+import mirror from "/mirror.jpg";
+import ohio from "/ohio.jpg";
 import sashaklineburrito from "/sashaklineburrito.jpg";
 import sashaklinecar from "/sashaklinecar.jpg";
-import sunsetkline from "/sunsetkline.jpg";
-import georgerasp from "/georgerasp.gif";
-import sunsetfourteenth from "/14thstsunrise.gif";
 import solderkitty from "/solderkitty.jpg";
-import ducklings from "/ducklings.gif";
-import fieldnotes from "/fieldnotes.gif";
-import lamp from "/lamp.gif";
-import ohio from "/ohio.jpg";
-import heron from "/heron.jpg";
-import flowers from "/flowers.jpg";
-import mirror from "/mirror.jpg";
+import sunsetkline from "/sunsetkline.jpg";
 
 let background = document.getElementById("background")!;
 
@@ -26,49 +27,86 @@ let prefersReducedMotion = window.matchMedia(
 
 let setImages = () => {
   let images: string[] = [];
+  let alts: string[] = [];
   if (prefersReducedMotion.matches) {
     images = [
       backwalkgeorge,
+      fieldnotes,
+      flowers,
       georgetoilet,
+      heron,
       klinefloor,
       klinemirror,
       klineoutside,
       klinetrain,
+      mirror,
+      ohio,
       sashaklineburrito,
       sashaklinecar,
-      sunsetkline,
-      // georgerasp,
-      // sunsetfourteenth,
       solderkitty,
-      // ducklings,
-      fieldnotes,
-      // lamp,
-      ohio,
-      heron,
-      flowers,
-      mirror,
+      sunsetkline,
+    ];
+    alts = [
+      "A small child holding a stuffed monkey and a santa hat walking away from the camera",
+      "Animated gif of a notebook with a pretty landscape illustration cover",
+      "A field of violet flowers",
+      "A woman smiling next to a stuffed monkey",
+      "A heron standing in a pond",
+      "A woman in a green sweater and jeans sitting on the floor and smiling",
+      "A woman in bed taking a mirror selfie where her face is distorted",
+      "A selfie of a woman in a driveway next to a truck",
+      "A young girl smiling in front of a train",
+      "A shattered mirror",
+      "Two adjacent houses lit by an early morning sunrise",
+      "A selfie of two friends holding burritos, one of whom is wearing a cammo hat",
+      "A selfie of two friends in a car, one of whom is wearing a cammo hat",
+      "A pink porcelain kitty figurine supporting a soldering iron",
+      "A selfie of a woman indoors, behind her the sun is setting in the window",
     ];
   } else {
     images = [
+      sunsetfourteenth,
       backwalkgeorge,
+      ducklings,
+      ermine,
+      fieldnotes,
+      flowers,
+      georgerasp,
       georgetoilet,
+      heron,
       klinefloor,
       klinemirror,
       klineoutside,
       klinetrain,
+      lamp,
+      mirror,
+      ohio,
       sashaklineburrito,
       sashaklinecar,
-      sunsetkline,
-      georgerasp,
-      sunsetfourteenth,
       solderkitty,
-      ducklings,
-      fieldnotes,
-      lamp,
-      ohio,
-      heron,
-      flowers,
-      mirror,
+      sunsetkline,
+    ];
+    alts = [
+      "Animated gif of a sunrise on a city street",
+      "A small child holding a stuffed monkey and a santa hat walking away from the camera",
+      "Animated gif of a duck and ducklings swimming in a pond",
+      "Animated gif of an ermine peeking up out of a crack in concrete",
+      "Animated gif of a notebook with a pretty landscape illustration cover",
+      "A field of violet flowers",
+      "Animated gif of an amber CRT screen with flashing text and Raspberry Pi logo",
+      "A woman smiling next to a stuffed monkey",
+      "A heron standing in a pond",
+      "A woman in a green sweater and jeans sitting on the floor and smiling",
+      "A woman in bed taking a mirror selfie where her face is distorted",
+      "A selfie of a woman in a driveway next to a truck",
+      "A young girl smiling in front of a train",
+      "Animated gif of a lamp behind which cars drive past in the snow",
+      "A shattered mirror",
+      "Two adjacent houses lit by an early morning sunrise",
+      "A selfie of two friends holding burritos, one of whom is wearing a cammo hat",
+      "A selfie of two friends in a car, one of whom is wearing a cammo hat",
+      "A pink porcelain kitty figurine supporting a soldering iron",
+      "A selfie of a woman indoors, behind her the sun is setting in the window",
     ];
   }
   const randn_bm = (mean = 0, stdev = 0.4) => {
@@ -105,6 +143,7 @@ let setImages = () => {
   for (let index in images) {
     let img = document.createElement("img");
     img.setAttribute("src", images[index]);
+    img.setAttribute("alt", alts[index]);
     // let left = randn_bm();
     // let top = randn_bm();
     let left = lefts[index];

style.css

@@ -69,6 +69,7 @@ a:hover {
 
 img {
     transform: translate(-50%, -50%) translateZ(var(--translate-z));
+    transition: transform 1s;
     position: absolute;
     inline-size: 10%;
     z-index: -1;