BAK-vaan: verschil tussen versies
Uit BoemelWiki
| Regel 1: | Regel 1: | ||
| + | <div class="boemel-slider"> | ||
| + | <div class="boemel-slide"><img src="/images/Foto1.jpg" alt="Foto 1"></div> | ||
| + | <div class="boemel-slide"><img src="/images/Foto2.jpg" alt="Foto 2"></div> | ||
| + | <div class="boemel-slide"><img src="/images/Foto3.jpg" alt="Foto 3"></div> | ||
| + | </div> | ||
| + | |||
| + | <style> | ||
| + | .boemel-slider { | ||
| + | position: relative; | ||
| + | width: 100%; | ||
| + | height: 320px; /* pas aan naar wens */ | ||
| + | overflow: hidden; | ||
| + | border-radius: 12px; | ||
| + | box-shadow: 0 0 20px rgba(0,0,0,0.25); | ||
| + | } | ||
| + | |||
| + | .boemel-slide { | ||
| + | position: absolute; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | opacity: 0; | ||
| + | animation: boemelFade 15s infinite; | ||
| + | } | ||
| + | |||
| + | .boemel-slide:nth-child(1) { animation-delay: 0s; } | ||
| + | .boemel-slide:nth-child(2) { animation-delay: 5s; } | ||
| + | .boemel-slide:nth-child(3) { animation-delay: 10s; } | ||
| + | |||
| + | .boemel-slide img { | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | object-fit: cover; | ||
| + | } | ||
| + | |||
| + | @keyframes boemelFade { | ||
| + | 0% { opacity: 0; } | ||
| + | 10% { opacity: 1; } | ||
| + | 30% { opacity: 1; } | ||
| + | 40% { opacity: 0; } | ||
| + | 100% { opacity: 0; } | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | |||
| + | |||
| + | |||
<gallery widths=160px heights=300px perrow=7 caption="BAK-Vanen door de jaren heen, klik op het vaan voor meer info over dat jaar" mode="traditional"> | <gallery widths=160px heights=300px perrow=7 caption="BAK-Vanen door de jaren heen, klik op het vaan voor meer info over dat jaar" mode="traditional"> | ||
VAAN2026.jpg | link=[[2025_-_2026_:_Hier_lopte_nie_kwijt]] | 2026 | VAAN2026.jpg | link=[[2025_-_2026_:_Hier_lopte_nie_kwijt]] | 2026 | ||
Versie van 27 mrt 2026 17:37
<style> .boemel-slider {
position: relative; width: 100%; height: 320px; /* pas aan naar wens */ overflow: hidden; border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.25);
}
.boemel-slide {
position: absolute; width: 100%; height: 100%; opacity: 0; animation: boemelFade 15s infinite;
}
.boemel-slide:nth-child(1) { animation-delay: 0s; } .boemel-slide:nth-child(2) { animation-delay: 5s; } .boemel-slide:nth-child(3) { animation-delay: 10s; }
.boemel-slide img {
width: 100%; height: 100%; object-fit: cover;
}
@keyframes boemelFade {
0% { opacity: 0; }
10% { opacity: 1; }
30% { opacity: 1; }
40% { opacity: 0; }
100% { opacity: 0; }
} </style>
- BAK-Vanen door de jaren heen, klik op het vaan voor meer info over dat jaar
