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;

assets/dist/style.css

@@ -828,6 +828,10 @@ button:focus-visible {
   margin-right: 2rem;
 }
 
+.hero .image-wrapper {
+  height: 100%;
+}
+
 .hero__image {
   height: calc(100vh - var(--empty-space) - 2 * var(--padding-vertical));
 }
@@ -839,6 +843,10 @@ button:focus-visible {
   object-fit: cover;
 }
 
+.hero__image:hover .image-cover {
+  opacity: 0;
+}
+
 @media screen and (max-width: 800px) {
   .hero__text h2 {
     text-align: center;
@@ -1161,6 +1169,17 @@ a.to-blank:hover > .ticket svg path.dot {
   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;

site/blueprints/site.yml

@@ -76,7 +76,7 @@ tabs:
             label: Image
             type: files
             min: 1
-            max: 1
+            max: 2
             layout: cards
             size: full
             image:

site/templates/home.php

@@ -8,12 +8,18 @@
   </div>
   <div class="hero__image" style="--color: var(--color-season)">
     <?php if ($site->heroLinkUrl()->isNotEmpty() == 'true'): ?>
-      <a href="<?= $site->heroLinkUrl()->toUrl() ?>" title="en savoir plus">
+      <a href="<?= $site->heroLinkUrl()->toUrl() ?>" title="en savoir plus"></a>
-        <?php snippet('picture', ['file' => $site->heroImage()->toFile(), 'lazy' => false, 'size' => 60]) ?>
-      </a>
-    <?php else: ?>
-      <?php snippet('picture', ['file' => $site->heroImage()->toFile(), 'lazy' => false, 'size' => 60]) ?>
     <?php endif ?>
+    <div class="image-wrapper">
+      <?php if ($site->heroImage()->toFiles()->count() > 1): ?>
+        <?php snippet('picture', [
+          'file' => $site->heroImage()->toFiles()->first(), 
+          'class' => 'image-cover',
+          'size' => 60
+        ]) ?>
+      <?php endif ?>
+      <?php snippet('picture', ['file' => $site->heroImage()->toFiles()->count() > 1 ? $site->heroImage()->toFiles()->nth(1) : $site->heroImage()->toFiles()->first(), 'lazy' => false, 'size' => 60]) ?>
+    </div>
   </div>
 </section>