hero image cover hidden on hover

assets/css/src/events-grid.css

@@ -56,6 +56,17 @@
   z-index: 3;
 }
 
+.hero__image {
+  position: relative;
+}
+
+.hero__image a {
+  position: absolute;
+  display: block;
+  inset: 0;
+  z-index: 3;
+}
+
 @media screen and (max-width: 800px) {
   .events-grid {
     --padding-vertical: 10vw;

assets/css/src/hero.css

@@ -55,6 +55,10 @@
   margin-right: 2rem;
 }
 
+.hero .image-wrapper {
+  height: 100%;
+}
+
 .hero__image {
   height: calc(100vh - var(--empty-space) - 2 * var(--padding-vertical));
 }
@@ -66,6 +70,10 @@
   object-fit: cover;
 }
 
+.hero__image:hover .image-cover {
+  opacity: 0;
+}
+
 @media screen and (max-width: 800px) {
   .hero__text h2 {
     text-align: center;