15 octobre 2026
Concert Jazz
CSS /* =========================== CARDS EVENEMENTS =========================== */ .evenements{ max-width:1300px; margin:auto; padding:60px 20px; display:grid;
grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:35px; } /* Carte */ .event-card{ position:relative; overflow:hidden; border-radius:18px; height:500px; cursor:pointer; box-shadow:0 18px
40px rgba(0,0,0,.18); } /* Photo */ .event-card img{ width:100%; height:100%; object-fit:cover; transition:all .6s ease; } /* Zoom */ .event-card:hover img{ transform:scale(1.10); } /* Dégradé */
.event-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; background:linear-gradient( to top, rgba(5,15,40,.88), rgba(15,60,120,.40), rgba(0,0,0,.05) ); transition:.45s; } /*
Couleur de survol */ .event-card:hover .event-overlay{ background:linear-gradient( to top, rgba(8,33,78,.92), rgba(18,96,190,.55), rgba(0,0,0,.10) ); } /* Contenu */ .event-content{ color:#fff;
width:100%; padding:35px; } /* Date */ .event-date{ display:inline-block; background:#ffffff22; backdrop-filter:blur(10px); padding:8px 16px; border-radius:30px; font-size:14px; margin-bottom:18px; }
/* Titre */ .event-content h2{ margin:0; font-size:32px; line-height:1.2; font-weight:700; } /* Boutons */ .event-buttons{ margin-top:30px; display:flex; gap:15px; opacity:0;
transform:translateY(35px); transition:.45s; } /* Apparition */ .event-card:hover .event-buttons{ opacity:1; transform:translateY(0); } /* Boutons */ .btn{ text-decoration:none; padding:14px 24px;
border-radius:40px; font-weight:bold; transition:.3s; } /* Blanc */ .btn-light{ background:white; color:#123D7A; } /* Or */ .btn-gold{ background:#D4A017; color:white; } .btn:hover{
transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.25); } Le résultat Lorsque le visiteur arrive sur la page : une belle photo plein format est affichée ; un dégradé discret permet de lire
le titre et la date ; le titre reste toujours visible. Quand il passe la souris : ✅ la photo zoome légèrement ; ✅ le voile devient plus coloré (aux couleurs du CAP) ; ✅ les boutons « En savoir plus »
et « Billetterie » glissent doucement vers le haut ; ✅ une ombre donne un effet de profondeur. Une suggestion supplémentaire Pour un site culturel, il est également possible d'ajouter une animation
où la photo est en noir et blanc par défaut et retrouve progressivement ses couleurs au survol, tout en conservant le zoom et les boutons. Cet effet est très apprécié sur les sites de festivals et de
salles de spectacles, car il attire naturellement le regard sans être trop chargé.
