Colored when not hovered

Author: steph1111

_includes/robot-card.html

@@ -5,7 +5,7 @@
             <a href="{{site.url}}{{site.baseurl}}/{{robot.page}}" class="robot-link">
                 <figure class="image is-5by4" style="background-image: url({{robot.image}});">
                     <div class="overlay">
-                        <h2 class="has-text-primary has-text-weight-bold is-size-3">{{ robot.year }}</h2>
+                        <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>
                 </figure>

assets/css/style.scss

@@ -239,18 +239,17 @@
         // upon hover, make image color
         .robot-link:hover .image {
             filter: grayscale(0%);
-            color: transparent;
         }
 
-        &::after {
-            h2 {
-                color: var(--primary) !important; // text is accent color
-                z-index: 2;  // text on top
-            }
-        
-            p {
-                z-index: 2; // text on top
-            }
+        h2 {
+            color: var(--primary) !important; // text is accent color
+            z-index: 2;  // text on top
+            position: relative;
+        }
+    
+        p {
+            z-index: 2; // text on top
+            position: relative;
         }
     }
 }