ImageLightbox image

---
// ImageLightbox, recovered from blurr-components.pages.dev
---

<section class="ilb"> <h2 class="ilb__title">Fotogalerij</h2> <div class="ilb__grid" style="--ilb-cols: 3"> <button class="ilb__thumb" type="button" aria-label="Bekijk: Foto 1"> <div class="ilb__placeholder" aria-label="Foto 1"></div> <span class="ilb__hint" aria-hidden="true"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> <line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line> </svg> </span> <span class="ilb__caption">Campagne lancering</span> </button><button class="ilb__thumb" type="button" aria-label="Bekijk: Foto 2"> <div class="ilb__placeholder" aria-label="Foto 2"></div> <span class="ilb__hint" aria-hidden="true"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> <line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line> </svg> </span> <span class="ilb__caption">Team event 2024</span> </button><button class="ilb__thumb" type="button" aria-label="Bekijk: Foto 3"> <div class="ilb__placeholder" aria-label="Foto 3"></div> <span class="ilb__hint" aria-hidden="true"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> <line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line> </svg> </span> <span class="ilb__caption">Nieuwe huisstijl</span> </button><button class="ilb__thumb" type="button" aria-label="Bekijk: Foto 4"> <div class="ilb__placeholder" aria-label="Foto 4"></div> <span class="ilb__hint" aria-hidden="true"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> <line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line> </svg> </span> <span class="ilb__caption">Shoot dag</span> </button> </div> <p class="ilb__note">Klik op een foto voor een grotere weergave (lightbox vereist JavaScript)</p> </section>

<style>
.ilb{padding:2rem 0}
.ilb__title{font-size:2rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 2rem;text-align:center}
.ilb__grid{display:grid;grid-template-columns:repeat(var(--ilb-cols, 3),1fr);gap:.75rem}
.ilb__thumb{position:relative;aspect-ratio:1;border:none;padding:0;cursor:pointer;border-radius:8px;overflow:hidden;background:#eee}
.ilb__img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ilb__thumb:hover .ilb__img{transform:scale(1.06)}
.ilb__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#e0e0f0,#c8c8e8);transition:opacity .3s}
.ilb__hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#6366f1b3;color:#fff;opacity:0;transition:opacity .25s}
.ilb__thumb:hover .ilb__hint{opacity:1}
.ilb__caption{position:absolute;bottom:0;left:0;right:0;background:#0a0a0ab3;color:#fff;font-size:.75rem;font-weight:600;padding:.5rem;text-align:center;transform:translateY(100%);transition:transform .25s}
.ilb__thumb:hover .ilb__caption{transform:translateY(0)}
.ilb__note{font-size:.8rem;color:#999;text-align:center;margin:1.5rem 0 0;font-style:italic}
.ilb__grid{grid-template-columns:repeat(2,1fr)}
</style>