src/components/image/ImageOverlay.astro
---
// ImageOverlay, recovered from blurr-components.pages.dev
---
<div class="iov" style="--iov-ratio: 16/9"> <div class="iov__placeholder" aria-label="Afbeelding met overlay"></div> <div class="iov__overlay"> <span class="iov__label">Case study</span> <p class="iov__title">+340% omzetgroei in 6 maanden</p> </div> </div>
<style>
.iov{position:relative;aspect-ratio:var(--iov-ratio, 16/9);overflow:hidden;border-radius:12px}
.iov__img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.iov:hover .iov__img{transform:scale(1.05)}
.iov__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#2a2a4a,#1a1a3a)}
.iov__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.75) 0%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}
.iov__label{display:inline-block;background:var(--color-accent, #6366f1);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:4px;margin-bottom:.5rem;align-self:flex-start}
.iov__title{font-size:1.2rem;font-weight:700;color:#fff;margin:0;line-height:1.3}
</style>