Additional prep for more fancy background loading

Author: markrandall

landing.php

@@ -253,12 +253,37 @@ function drawBranchInfo(array $release): void
         </div>
     </div>
 
-    <div style="background: #202127">
-        <div class="landing-section">
+    <div style="background: #202127; position: relative" >
+        <?php foreach ($heroCards as $heroCard) { ?>
+            <div class="hero-bg" id="<?= safe($heroCard->id . '-cover') ?>"></div>
+        <?php } ?>
+
+        <div class="landing-section" style="position: relative; z-index: 1">
             <div role="list" class="vgrid"><?= buildNavCards($heroCards) ?></div>
         </div>
     </div>
 
+    <script type="text/javascript">
+        (() => {
+            let heroIds = <?= json_encode(array_map(fn(NavCardItem $card) => $card->id, $heroCards), flags: JSON_HEX_QUOT | JSON_HEX_QUOT) ?>;
+            heroIds.forEach(heroId => {
+                const cover = document.querySelector('#' + heroId + '-cover');
+                if (!cover) console.error('Unable to find cover ' + heroId);
+
+                const card = document.querySelector('#' + heroId);
+                if (!card) console.error('Unable to find card ' + heroId);
+
+                card.addEventListener('mouseenter', () => {
+                   cover.style.opacity = 1;
+                });
+
+                card.addEventListener('mouseleave', () => {
+                    cover.style.opacity = 0;
+                });
+            });
+        })();
+    </script>
+
     <div class="landing-section">
         <div id="releases" >
             <div class="landing-lrv">

styles/landing.css

@@ -406,3 +406,11 @@
 .landing-card-btn:focus-visible {
     outline: 4px solid #818cf8;
 }
+
+.hero-bg {
+    transition: all 0.5s ease-in-out;
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+}
+