maybe???

Author: steph1111

_includes/robot-card.html

@@ -3,9 +3,10 @@
         <div class="column has-text-centered m-2 is-one-third-widescreen is-one-third-desktop is-one-fifth-fullhd is-one-third-tablet is-two-fifths-mobile is-three-quarters-touch"
             id="robot-card">
             <a href="{{site.url}}{{site.baseurl}}/{{robot.page}}" class="robot-link">
-                <figure class="image is-5by4" style="background-image: url({{robot.image}});">
-                </figure>
                 <div class="overlay">
+                    <figure class="image is-5by4" style="background-image: url({{robot.image}});"></figure>
+                </div>
+                <div class="text">
                     <h2 class="has-text-weight-bold is-size-3">{{ robot.year }}</h2>
                     <p class="has-text-white-ter has-text-weight-normal">{{ robot.name }}</p>
                 </div>

assets/css/style.scss

@@ -6,7 +6,7 @@
 :root {
     --primary: #9172f8;
     --black: #121212;
-    --white: #ffffff;
+    --white: #f5f5f5;
     --seahawk-II: #fe5e20;
     --seahawk: #79bde8;
     --hydrozoa: #3961e2;
@@ -241,9 +241,10 @@
         .robot-link:hover .overlay {
             opacity: 0;
         }
-
-        h2, p {
+        h2 {
             color: var(--primary) !important;
+        }
+        h2, p {
             z-index: 2;
             position: relative;
             transition: opacity 0.5s ease;