Rand licht op bij de cursor Nieuw
De randen van een groep kaarten lichten oranje op op de plek waar de cursor in de buurt is, ook over de tussenruimte heen naar de buurkaart. Eén pointermove op de groep zet per kaart de muispositie in CSS-variabelen; de rand zelf is een radial-gradient die met een mask tot 1,5 px wordt teruggebracht. Bij toetsenbordfocus licht de hele rand op, zonder JavaScript blijft een gewone grijze rand. Voor pakketten, abonnementen of diensten op een donkere of lichte pagina.
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.
- Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Rand licht op bij de cursor · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hrv">
<a class="hrv__c hrv__c--big" href="#hv-rand-volgt"><span class="hrv__t">Werkplekbeheer</span><span class="hrv__d">Laptops, updates en een vaste beheerder voor kantoren in en rond Eindhoven.</span><span class="hrv__p">€ 39 per medewerker per maand</span></a>
<a class="hrv__c" href="#hv-rand-volgt"><span class="hrv__t">Back-up in Nederland</span><span class="hrv__p">vanaf € 19 per maand</span></a>
<a class="hrv__c" href="#hv-rand-volgt"><span class="hrv__t">Zakelijke telefonie</span><span class="hrv__p">€ 9,50 per toestel</span></a>
</div>
</div>/* Rand licht op bij de cursor · NedDev · eigen werk. */
.hrv{position:absolute;inset:0;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:18px;background:#0a0a0a;font-family:'Switzer',sans-serif;color:#fff;container-type:size;text-align:left}
.hrv *,.hrv *::before,.hrv *::after{box-sizing:border-box}
.hrv__c{--mx:-999px;--my:-999px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:0;padding:12px 14px;border-radius:8px;background:#161514;color:#fff;text-decoration:none;outline:none}
.hrv__c--big{grid-row:1/3;justify-content:flex-start}
.hrv__c--big .hrv__d{margin-top:auto}
.hrv__c::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(190px circle at var(--mx) var(--my),#F5480F,rgba(245,72,15,.35) 40%,rgba(255,255,255,0) 70%),linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14));-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);-webkit-mask-composite:xor;pointer-events:none}
.hrv__c::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--mx) var(--my),rgba(245,72,15,.08),rgba(245,72,15,0) 70%);pointer-events:none}
.hrv__c:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.hrv__c:focus-visible::before{background:#F5480F}
.hrv__t{position:relative;font:600 15px/1.2 'Switzer',sans-serif}
.hrv__c--big .hrv__t{font-size:19px;letter-spacing:-.015em}
.hrv__d{position:relative;font:400 13px/1.4 'Switzer',sans-serif;color:#cfccc6;max-width:22em}
.hrv__p{position:relative;font:500 13px/1.3 'Switzer',sans-serif;color:#ffb497}
@container (max-height:230px){.hrv{padding:12px;gap:8px}.hrv__c{padding:10px 11px}.hrv__d{display:none}.hrv__c--big{justify-content:flex-end}}
@container (max-width:380px){.hrv__t{font-size:13px}.hrv__c--big .hrv__t{font-size:16px}.hrv__p{font-size:12px}}// Rand licht op bij de cursor · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var g=root.querySelector('.hrv');if(!g)return;
var cards=[].slice.call(g.querySelectorAll('.hrv__c')),raf=0,ex=0,ey=0;
function apply(){raf=0;cards.forEach(function(c){var r=c.getBoundingClientRect();c.style.setProperty('--mx',(ex-r.left).toFixed(0)+'px');c.style.setProperty('--my',(ey-r.top).toFixed(0)+'px');});}
g.addEventListener('pointermove',function(e){ex=e.clientX;ey=e.clientY;if(!raf)raf=requestAnimationFrame(apply);});
g.addEventListener('pointerleave',function(){cards.forEach(function(c){c.style.setProperty('--mx','-999px');c.style.setProperty('--my','-999px');});});
}
init(document.querySelector('.jouw-container'));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 →