Rand licht op bij de cursor New
The borders of a group of cards light up orange where the cursor is close, even across the gap onto the neighbouring card. A single pointermove on the group writes the cursor position per card into CSS variables; the border itself is a radial gradient masked down to 1.5 px. On keyboard focus the whole border lights up, without JavaScript a plain grey border stays. For packages, subscriptions or services on a dark or light page.
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.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- 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'));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 →