add images covers

This commit is contained in:
isUnknown 2024-09-05 12:37:46 +02:00
parent 06a2e81c66
commit 972faa7e32
2 changed files with 20 additions and 1 deletions

View file

@ -172,3 +172,17 @@
.shift-small {
margin-left: var(--shift-small);
}
.image-wrapper {
position: relative;
}
.image-wrapper .image-cover {
position: absolute;
z-index: 2;
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.event-card:hover .image-cover {
opacity: 0;
}

View file

@ -1,6 +1,11 @@
<div class="event-card grid__item" style="--span: <?= $span ?>">
<a class="event-card__link" href="<?= $event->url() ?>" title="Voir l'événément"></a>
<?php snippet('picture', ["file" => $event->gallery()->toFiles()->first()]) ?>
<div class="image-wrapper">
<?php if ($event->gallery()->toFiles()->count() > 1): ?>
<img class="image-cover" src="<?= $event->gallery()->toFiles()->first()->url() ?>" alt="">
<?php endif ?>
<?php snippet('picture', ["file" => $event->gallery()->toFiles()->count() > 1 ? $event->gallery()->toFiles()->nth(2) : $event->gallery()->toFiles()->first()]) ?>
</div>
<div class="event-card__infos">
<div>
<h5><?= $event->title() ?></h5>