Focuskaarten · de rest vervaagt New
Point at a card or tab to it and the other cards go soft, slightly smaller and lighter, keeping the eye on the chosen card. Pure CSS with :has(); browsers without :has() just show the hover on the card itself. For accommodations, locations or featured cases in a compact grid.
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.
<!-- Focuskaarten · de rest vervaagt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hfk">
<a class="hfk__tile hfk__tile--a" href="#hv-focus-kaarten"><img src="https://neddev.com/lab-media/hv-focus-kaarten-1.webp" alt="" width="900" height="491" loading="lazy"><span class="hfk__txt"><span class="hfk__t">Duinhuisje Zeezicht</span><span class="hfk__m">4 personen · vanaf € 129 per nacht</span></span></a>
<a class="hfk__tile hfk__tile--b" href="#hv-focus-kaarten"><img src="https://neddev.com/lab-media/hv-focus-kaarten-2.webp" alt="" width="900" height="491" loading="lazy"><span class="hfk__txt"><span class="hfk__t">Huisje met houtkachel</span><span class="hfk__m">2 personen · vanaf € 98</span></span></a>
<a class="hfk__tile hfk__tile--c" href="#hv-focus-kaarten"><img src="https://neddev.com/lab-media/hv-focus-kaarten-3.webp" alt="" width="900" height="491" loading="lazy"><span class="hfk__txt"><span class="hfk__t">Fietsen huren in Domburg</span><span class="hfk__m">€ 12 per dag</span></span></a>
</div>
</div>/* Focuskaarten · de rest vervaagt · NedDev · eigen werk. */
.hfk{position:absolute;inset:0;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:16px;background:#f4f3f1;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.hfk *,.hfk *::before,.hfk *::after{box-sizing:border-box}
.hfk__tile{position:relative;overflow:hidden;border-radius:4px;background:#0a0a0a;color:#fff;text-decoration:none;outline:none;min-height:0;transition:filter .35s ease,opacity .35s ease,transform .35s cubic-bezier(.2,.7,.3,1)}
.hfk__tile--a{grid-row:1/3}
.hfk__tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hfk__tile:hover img,.hfk__tile:focus-visible img{transform:scale(1.03)}
.hfk__tile:focus-visible{box-shadow:0 0 0 2px #f4f3f1,0 0 0 4px #F5480F}
.hfk__txt{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 9px;background:linear-gradient(0deg,rgba(10,10,10,.8),rgba(10,10,10,0))}
.hfk__t{display:block;font:600 13px/1.2 'Switzer',sans-serif}
.hfk__m{display:block;margin-top:2px;font:400 12px/1.3 'Switzer',sans-serif;color:#eceae6}
.hfk:has(.hfk__tile:hover) .hfk__tile:not(:hover),.hfk:has(.hfk__tile:focus-visible) .hfk__tile:not(:focus-visible){filter:blur(2px) saturate(.5);opacity:.55;transform:scale(.98)}
@container (max-height:230px){.hfk{padding:12px;gap:8px}.hfk__tile--b .hfk__m,.hfk__tile--c .hfk__m{display:none}}
@media (prefers-reduced-motion:reduce){.hfk__tile,.hfk__tile img{transition:none}.hfk__tile:hover img,.hfk__tile:focus-visible img{transform:none}.hfk:has(.hfk__tile:hover) .hfk__tile:not(:hover),.hfk:has(.hfk__tile:focus-visible) .hfk__tile:not(:focus-visible){transform:none;filter:saturate(.4)}}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 →