Wollen trui Roest€ 89,95
Productkaart · tweede foto en snel toevoegen New
Shop card that cross-fades to a second photo (worn or in use) on hover or focus and slides in a size bar to add straight away. Pick a size and the card announces what is in the cart via aria-live. On touch screens the size bar always sits below the photo and you swap the photo by tapping the image. For clothing, shoes and anything with variants.
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.
<!-- Productkaart · tweede foto en snel toevoegen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hpw">
<article class="hpw__card">
<div class="hpw__media">
<button class="hpw__swap" type="button" aria-label="Toon tweede foto"><img class="hpw__a" src="https://neddev.com/lab-media/hv-productkaart-wissel-1.webp" alt="Wollen trui in roestoranje, gevouwen" width="900" height="491" loading="lazy"><img class="hpw__b" src="https://neddev.com/lab-media/hv-productkaart-wissel-2.webp" alt="Dezelfde trui gedragen op straat in Utrecht" width="900" height="491" loading="lazy"></button>
<div class="hpw__sizes" role="group" aria-label="Snel toevoegen, kies een maat">
<button type="button" class="hpw__s">S</button><button type="button" class="hpw__s">M</button><button type="button" class="hpw__s">L</button><button type="button" class="hpw__s" disabled aria-label="XL, uitverkocht">XL</button>
</div>
</div>
<div class="hpw__info"><a class="hpw__n" href="#hv-productkaart-wissel">Wollen trui Roest</a><span class="hpw__p">€ 89,95</span></div>
<p class="hpw__live" aria-live="polite"></p>
</article>
</div>
</div>/* Productkaart · tweede foto en snel toevoegen · NedDev · eigen werk. */
.hpw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a;container-type:size}
.hpw *,.hpw *::before,.hpw *::after{box-sizing:border-box}
.hpw__card{position:relative;width:230px;max-width:100%;height:100%;max-height:225px;display:flex;flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(10,10,10,.06)}
.hpw__media{position:relative;flex:1;min-height:0;overflow:hidden;background:#e9e7e3}
.hpw__swap{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;outline:none}
.hpw__swap:focus-visible{outline:2px solid #F5480F;outline-offset:-3px}
.hpw__swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.hpw__b{opacity:0;transform:scale(1.04)}
.hpw__card:hover .hpw__b,.hpw__card:focus-within .hpw__b,.hpw__card.is-b .hpw__b{opacity:1;transform:none}
.hpw__card.is-a .hpw__b{opacity:0}
.hpw__sizes{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:4px;padding:4px;background:#fff;border-radius:4px;box-shadow:0 6px 16px -8px rgba(10,10,10,.4);transform:translateY(calc(100% + 10px));transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.hpw__card:hover .hpw__sizes,.hpw__card:focus-within .hpw__sizes{transform:none}
.hpw__s{flex:1;min-height:28px;margin:0;padding:0;border:1px solid #d9d6d0;border-radius:4px;background:#fff;color:#0a0a0a;font:500 12px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.hpw__s:hover{border-color:#0a0a0a}
.hpw__s:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.hpw__s.is-picked{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.hpw__s:disabled{color:#8b877f;text-decoration:line-through;cursor:not-allowed;background:#f4f3f1}
.hpw__info{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 12px 0}
.hpw__n{display:inline-block;padding:4px 0;font:500 13px/1.3 'Switzer',sans-serif;color:#0a0a0a;text-decoration:none;outline:none}
.hpw__n:hover{text-decoration:underline;text-underline-offset:3px}
.hpw__n:focus-visible{outline:2px solid #F5480F;outline-offset:2px;border-radius:2px}
.hpw__p{font:600 13px/1.3 'Switzer',sans-serif;font-variant-numeric:tabular-nums}
.hpw__live{margin:0;min-height:22px;padding:0 12px 6px;font:400 12px/1.4 'Switzer',sans-serif;color:#1f7a3f}
@media (hover:none){.hpw__sizes{transform:none}}
@media (prefers-reduced-motion:reduce){.hpw__swap img,.hpw__sizes{transition:opacity .15s}.hpw__b{transform:none}}// Productkaart · tweede foto en snel toevoegen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var c=root.querySelector('.hpw__card');if(!c)return;
var live=c.querySelector('.hpw__live'),sw=c.querySelector('.hpw__swap'),t=0;
sw.addEventListener('click',function(){var showB=!(c.classList.contains('is-b'));c.classList.toggle('is-b',showB);c.classList.toggle('is-a',!showB);sw.setAttribute('aria-label',showB?'Toon eerste foto':'Toon tweede foto');});
[].forEach.call(c.querySelectorAll('.hpw__s'),function(b){b.addEventListener('click',function(){if(b.disabled)return;[].forEach.call(c.querySelectorAll('.hpw__s'),function(x){x.classList.remove('is-picked');x.removeAttribute('aria-pressed');});b.classList.add('is-picked');b.setAttribute('aria-pressed','true');live.textContent='Maat '+b.textContent+' ligt in je winkelwagen.';clearTimeout(t);t=setTimeout(function(){live.textContent='';},4000);});});
}
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 →