Focuskaarten · de rest vervaagt Nieuw
Wijs een kaart aan of tab erheen en de andere kaarten worden onscherp, iets kleiner en lichter, zodat het oog bij de gekozen kaart blijft. Pure CSS met :has(); browsers zonder :has() tonen gewoon de hover op de kaart zelf. Voor accommodaties, vestigingen of uitgelichte cases in een compact raster.
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Geen JavaScript nodig.
<!-- 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)}}Meer uit componenten
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →