Beelden onthullen met alleen CSS New
Each image opens with clip-path as it scrolls into view, a different direction per image, without a single line of JavaScript: animation-timeline: view() (Chrome, Edge, Safari 26). Without support or with reduced motion the images are simply visible. Good for a projects page; scroll inside the panel.
Projecten 2026
Drie opleveringen uit Haarlem en omgeving.
Scroll in dit vlak
Bekijk alle 64 projecten
How to use it
- Paste the HTML where the scroll effects should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- Beelden onthullen met alleen CSS · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="boc" tabindex="0" role="region" aria-label="Projecten, scrollbaar">
<div class="boc__intro"><span class="boc__k">Projecten 2026</span><p class="boc__h">Drie opleveringen uit Haarlem en omgeving.</p><span class="boc__hint">Scroll in dit vlak</span></div>
<figure class="boc__fig"><div class="boc__clip boc__clip--up"><img src="https://neddev.com/lab-media/beeld-onthulling-css-1.webp" alt="Achtertuin met nieuw terras van gebakken klinkers en jonge bomen" width="900" height="491" loading="lazy" decoding="async"></div><figcaption><b>Achtertuin Schoterweg</b><span>Terras 42 m² · 3 weken</span></figcaption></figure>
<figure class="boc__fig"><div class="boc__clip boc__clip--side"><img src="https://neddev.com/lab-media/beeld-onthulling-css-2.webp" alt="Gerenoveerde badkamer met inloopdouche met zwart kader" width="900" height="491" loading="lazy" decoding="async"></div><figcaption><b>Badkamer Kleverpark</b><span>Inloopdouche · 9 werkdagen</span></figcaption></figure>
<figure class="boc__fig"><div class="boc__clip boc__clip--mid"><img src="https://neddev.com/lab-media/beeld-onthulling-css-3.webp" alt="Werkplaats met eiken planken op een werkbank" width="900" height="491" loading="lazy" decoding="async"></div><figcaption><b>Maatwerk eiken trap</b><span>Eigen werkplaats · Heemstede</span></figcaption></figure>
<p class="boc__end">Bekijk alle 64 projecten</p>
</div>
</div>/* Beelden onthullen met alleen CSS · NedDev · eigen werk. */
.boc{position:absolute;inset:0;overflow-y:auto;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;padding:0 14px;scrollbar-width:thin}
.boc:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.boc__intro{min-height:52%;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 0}
.boc__k{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#b8360a}
.boc__h{margin:0;font:700 clamp(18px,5.4cqi,24px)/1.1 'Switzer',sans-serif;letter-spacing:-.025em;max-width:16em}
.boc__hint{font:500 10px 'JetBrains Mono',monospace;color:#5f5a54;text-transform:uppercase;letter-spacing:.08em}
.boc__hint::after{content:' \2193'}
.boc__fig{margin:0 0 22px}
.boc__clip{overflow:hidden;border-radius:4px;aspect-ratio:16/8;background:#dcd8d2}
.boc__clip img{display:block;width:100%;height:100%;object-fit:cover}
.boc__fig figcaption{display:flex;justify-content:space-between;gap:10px;padding-top:7px;font-size:12px}
.boc__fig figcaption span{font:500 11px 'JetBrains Mono',monospace;color:#5f5a54}
.boc__end{margin:0 0 18px;padding:12px 0;border-top:1px solid #0a0a0a;font-weight:600;font-size:13px}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
.boc__clip{animation:boc-up linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
.boc__clip--side{animation-name:boc-side}
.boc__clip--mid{animation-name:boc-mid}
.boc__clip img{animation:boc-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
}}
@keyframes boc-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes boc-side{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes boc-mid{from{clip-path:inset(42% 46% 42% 46% round 4px)}to{clip-path:inset(0 round 4px)}}
@keyframes boc-zoom{from{transform:scale(1.18)}to{transform:scale(1)}}More scroll effects
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →