Projectkaarten · drie hover-varianten New
Three ways for a project card to respond to hover and keyboard focus: lift (2 px up with a softer shadow), reveal text (a short description opens below the title via grid-template-rows) and slide in image (the photo slides up over a text card). Pick one per site; for portfolios of builders, designers and agencies. Pure CSS, with reduced motion only a colour change.
How to use it
- Paste the HTML where the components should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- Projectkaarten · drie hover-varianten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hks">
<div class="hks__col">
<a class="hks__card hks__card--lift" href="#hv-kaart-set"><span class="hks__img"><img src="https://neddev.com/lab-media/hv-kaart-set-1.webp" alt="" width="900" height="491" loading="lazy"></span><span class="hks__body"><span class="hks__t">Badkamer in Heemstede</span><span class="hks__m">Klaar in 3 weken</span></span></a>
<span class="hks__cap">Optillen</span>
</div>
<div class="hks__col">
<a class="hks__card hks__card--reveal" href="#hv-kaart-set"><img class="hks__full" src="https://neddev.com/lab-media/hv-kaart-set-2.webp" alt="" width="900" height="491" loading="lazy"><span class="hks__over"><span class="hks__t">Keuken in Haarlem</span><span class="hks__more"><span class="hks__mi">Mat zwart met eiken, € 18.400 geplaatst.</span></span></span></a>
<span class="hks__cap">Tekst onthullen</span>
</div>
<div class="hks__col">
<a class="hks__card hks__card--slide" href="#hv-kaart-set"><span class="hks__plain"><span class="hks__t">Aanbouw in Bloemendaal</span><span class="hks__m">14 m² extra woonkamer met schuifpui</span><span class="hks__go">Bekijk project</span></span><img class="hks__in" src="https://neddev.com/lab-media/hv-kaart-set-3.webp" alt="" width="900" height="491" loading="lazy"><span class="hks__lbl"><span class="hks__t">Aanbouw in Bloemendaal</span></span></a>
<span class="hks__cap">Beeld inschuiven</span>
</div>
</div>
</div>/* Projectkaarten · drie hover-varianten · NedDev · eigen werk. */
.hks{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:14px 16px 10px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a;container-type:size;text-align:left}
.hks *,.hks *::before,.hks *::after{box-sizing:border-box}
.hks__col{display:flex;flex-direction:column;gap:5px;min-width:0;min-height:0}
.hks__col:first-child{grid-row:1/3}
.hks__cap{font:500 12px/1.2 'Switzer',sans-serif;color:#55524d}
.hks__card{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;border-radius:4px;overflow:hidden;background:#fff;color:inherit;text-decoration:none;outline:none}
.hks__card:focus-visible{box-shadow:0 0 0 2px #f4f3f1,0 0 0 4px #F5480F}
.hks__t{display:block;font:600 13px/1.2 'Switzer',sans-serif;letter-spacing:-.01em}
.hks__m{display:block;margin-top:3px;font:400 12px/1.3 'Switzer',sans-serif;color:#55524d}
.hks img{display:block;width:100%;height:100%;object-fit:cover}
/* optillen */
.hks__card--lift{box-shadow:0 1px 2px rgba(10,10,10,.08);transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.hks__card--lift::after{content:'';position:absolute;inset:0;border-radius:4px;box-shadow:0 14px 28px -12px rgba(10,10,10,.35);opacity:0;transition:opacity .22s;pointer-events:none}
.hks__card--lift:hover,.hks__card--lift:focus-visible{transform:translateY(-3px)}
.hks__card--lift:hover::after,.hks__card--lift:focus-visible::after{opacity:1}
.hks__img{flex:1;min-height:0;overflow:hidden}
.hks__body{padding:8px 10px 10px}
/* tekst onthullen */
.hks__card--reveal{background:#0a0a0a;color:#fff}
.hks__full{position:absolute;inset:0}
.hks__over{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 10px;background:linear-gradient(0deg,rgba(10,10,10,.86),rgba(10,10,10,.55) 60%,rgba(10,10,10,0))}
.hks__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.7,.3,1)}
.hks__mi{overflow:hidden;font:400 12px/1.3 'Switzer',sans-serif;color:#eceae6;opacity:0;transition:opacity .25s}
.hks__card--reveal:hover .hks__more,.hks__card--reveal:focus-visible .hks__more{grid-template-rows:1fr}
.hks__card--reveal:hover .hks__mi,.hks__card--reveal:focus-visible .hks__mi{opacity:1;padding-top:4px}
/* beeld inschuiven */
.hks__plain{flex:1;padding:10px;display:flex;flex-direction:column;border-top:3px solid #F5480F}
.hks__go{margin-top:auto;font:600 12px/1.2 'Switzer',sans-serif;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#F5480F}
.hks__in{position:absolute;inset:0;transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.hks__lbl{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 10px;color:#fff;background:linear-gradient(0deg,rgba(10,10,10,.8),rgba(10,10,10,0));transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.hks__card--slide:hover .hks__in,.hks__card--slide:focus-visible .hks__in,.hks__card--slide:hover .hks__lbl,.hks__card--slide:focus-visible .hks__lbl{transform:none}
@container (max-height:230px){.hks{padding:10px 12px 8px;gap:8px 10px}.hks__body{padding:6px 8px 7px}.hks__over{padding:14px 8px 7px}.hks__plain{padding:7px 8px}.hks__plain .hks__m{display:none}}
@container (max-width:360px){.hks__t{font-size:12px}}
@media (hover:none){.hks__card--reveal .hks__more{grid-template-rows:1fr}.hks__card--reveal .hks__mi{opacity:1}}
@media (prefers-reduced-motion:reduce){.hks__card--lift,.hks__more,.hks__in,.hks__lbl{transition:none}.hks__card--lift:hover,.hks__card--lift:focus-visible{transform:none}.hks__in,.hks__lbl{transform:none;opacity:0;transition:opacity .2s}.hks__card--slide:hover .hks__in,.hks__card--slide:focus-visible .hks__in,.hks__card--slide:hover .hks__lbl,.hks__card--slide:focus-visible .hks__lbl{opacity:1}}More components
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 →