Hover-bewegingen · groeien, zweven, wiebelen, kantelen Nieuw

<!-- Hover-bewegingen · groeien, zweven, wiebelen, kantelen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="h2d" data-mode="groei">
<div class="h2d__seg" role="radiogroup" aria-label="Hoverbeweging kiezen">
<label class="h2d__opt"><input type="radio" name="h2d-mode" value="groei" checked><span>Groeien</span></label>
<label class="h2d__opt"><input type="radio" name="h2d-mode" value="zweef"><span>Zweven</span></label>
<label class="h2d__opt"><input type="radio" name="h2d-mode" value="wiebel"><span>Wiebelen</span></label>
<label class="h2d__opt"><input type="radio" name="h2d-mode" value="kantel"><span>Kantelen</span></label>
</div>
<div class="h2d__row">
<a class="h2d__fx h2d__btn" href="#hv-2d-set">Offerte aanvragen</a>
<a class="h2d__fx h2d__ico" href="#hv-2d-set" aria-label="Bel de servicedesk"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.6 3.5h3l1.5 4-2 1.3a10.5 10.5 0 0 0 6.1 6.1l1.3-2 4 1.5v3a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z"/></svg></a>
<a class="h2d__fx h2d__tag" href="#hv-2d-set"><span class="h2d__tn">Cv-ketel onderhoud</span><span class="h2d__tp">€ 89</span></a>
</div>
</div>
</div>

/* Hover-bewegingen · groeien, zweven, wiebelen, kantelen · NedDev · eigen werk. */
.h2d{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:16px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a;container-type:size}
.h2d *,.h2d *::before,.h2d *::after{box-sizing:border-box}
.h2d__seg{display:flex;padding:3px;gap:2px;background:#fff;border:1px solid #d9d6d0;border-radius:8px}
.h2d__opt{position:relative;display:block}
.h2d__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.h2d__opt span{display:block;padding:7px 11px;border-radius:4px;font:500 13px/1.1 'Switzer',sans-serif;color:#55524d;transition:background-color .16s,color .16s}
.h2d__opt input:checked+span{background:#0a0a0a;color:#fff}
.h2d__opt input:focus-visible+span{outline:2px solid #F5480F;outline-offset:2px}
.h2d__opt:hover input:not(:checked)+span{color:#0a0a0a}
.h2d__row{display:flex;align-items:center;gap:18px}
.h2d__fx{outline:none;text-decoration:none;color:#0a0a0a;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background-color .16s,color .16s}
.h2d__fx:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.h2d__btn{padding:12px 16px;background:#0a0a0a;color:#fff;border-radius:4px;font:600 14px/1 'Switzer',sans-serif}
.h2d__btn:hover,.h2d__btn:focus-visible{background:#F5480F;color:#0a0a0a}
.h2d__ico{width:44px;height:44px;display:grid;place-items:center;background:#fff;border:1px solid #d9d6d0;border-radius:8px}
.h2d__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.h2d__ico:hover,.h2d__ico:focus-visible{color:#F5480F;border-color:#F5480F}
.h2d__tag{display:flex;flex-direction:column;gap:2px;padding:8px 12px;background:#fff;border:1px solid #d9d6d0;border-radius:4px}
.h2d__tn{font:500 12px/1.2 'Switzer',sans-serif;color:#55524d}
.h2d__tp{font:700 16px/1.1 'Switzer',sans-serif}
.h2d__tag:hover,.h2d__tag:focus-visible{border-color:#0a0a0a}
.h2d[data-mode=groei] .h2d__fx:hover,.h2d[data-mode=groei] .h2d__fx:focus-visible{transform:scale(1.06)}
.h2d[data-mode=zweef] .h2d__fx:hover,.h2d[data-mode=zweef] .h2d__fx:focus-visible{transform:translateY(-4px);box-shadow:0 10px 18px -10px rgba(10,10,10,.45)}
.h2d[data-mode=wiebel] .h2d__fx:hover,.h2d[data-mode=wiebel] .h2d__fx:focus-visible{animation:h2d-wiebel .42s ease-in-out 1}
.h2d[data-mode=kantel] .h2d__fx:hover,.h2d[data-mode=kantel] .h2d__fx:focus-visible{transform:rotate(-3deg)}
@keyframes h2d-wiebel{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}45%{transform:rotate(3deg)}70%{transform:rotate(-1.5deg)}}
@container (max-width:380px){.h2d{gap:20px}.h2d__opt span{padding:7px 7px;font-size:12px}.h2d__row{gap:12px}.h2d__btn{padding:11px 12px;font-size:13px}}
@container (max-height:220px){.h2d{gap:18px}}
@media (prefers-reduced-motion:reduce){.h2d__fx{transition:background-color .16s,color .16s,border-color .16s}.h2d .h2d__fx:hover,.h2d .h2d__fx:focus-visible{transform:none;animation:none;box-shadow:none}}

// Hover-bewegingen · groeien, zweven, wiebelen, kantelen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.h2d');if(!w)return;
[].forEach.call(w.querySelectorAll('input[name="h2d-mode"]'),function(r){r.addEventListener('change',function(){if(r.checked)w.setAttribute('data-mode',r.value);});});
}
init(document.querySelector('.jouw-container'));