Zachte schaduw en warme gloed Nieuw
Twee rustige hoverstaten voor productkaarten: een gelaagde schaduw die openbloeit met 2 px lift, en een warme gloed in de merkkleur met een dunne rand. De schaduw zit op een pseudo-element waarvan alleen de opacity animeert, dus geen haperende box-shadow-transitie. Voor webshops en dienstenoverzichten waar het beeld het werk moet doen.
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.
<!-- Zachte schaduw en warme gloed · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hsr">
<a class="hsr__card hsr__card--shadow" href="#hv-schaduw-rustig"><span class="hsr__img"><img src="https://neddev.com/lab-media/hv-schaduw-rustig-1.webp" alt="" width="900" height="491" loading="lazy"></span><span class="hsr__row"><span class="hsr__n">Leren werkschoen Veenendaal</span><span class="hsr__p">€ 149</span></span><span class="hsr__k">Zachte schaduw</span></a>
<a class="hsr__card hsr__card--glow" href="#hv-schaduw-rustig"><span class="hsr__img"><img src="https://neddev.com/lab-media/hv-schaduw-rustig-2.webp" alt="" width="900" height="491" loading="lazy"></span><span class="hsr__row"><span class="hsr__n">Schenkketel RVS 0,6 liter</span><span class="hsr__p">€ 54,95</span></span><span class="hsr__k">Warme gloed</span></a>
</div>
</div>/* Zachte schaduw en warme gloed · NedDev · eigen werk. */
.hsr{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 22px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a;container-type:size;text-align:left}
.hsr *,.hsr *::before,.hsr *::after{box-sizing:border-box}
.hsr__card{position:relative;display:flex;flex-direction:column;min-height:0;background:#fff;border-radius:8px;color:inherit;text-decoration:none;outline:none;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.hsr__card::before,.hsr__card::after{content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;transition:opacity .3s ease}
.hsr__card::before{box-shadow:0 1px 2px rgba(10,10,10,.06),0 2px 6px rgba(10,10,10,.04)}
.hsr__card::after{opacity:0}
.hsr__card--shadow::after{box-shadow:0 1px 2px rgba(10,10,10,.05),0 6px 12px -4px rgba(10,10,10,.08),0 18px 32px -12px rgba(10,10,10,.18)}
.hsr__card--glow::after{box-shadow:0 0 0 1px rgba(245,72,15,.55),0 10px 30px -10px rgba(245,72,15,.45)}
.hsr__card:hover,.hsr__card:focus-visible{transform:translateY(-2px)}
.hsr__card:hover::after,.hsr__card:focus-visible::after{opacity:1}
.hsr__card:focus-visible{box-shadow:0 0 0 2px #f4f3f1,0 0 0 4px #0a0a0a}
.hsr__img{flex:1;min-height:0;overflow:hidden;border-radius:8px 8px 0 0}
.hsr__img img{display:block;width:100%;height:100%;object-fit:cover}
.hsr__row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 12px 2px}
.hsr__n{font:500 13px/1.25 'Switzer',sans-serif;min-width:0}
.hsr__p{font:600 13px/1.25 'Switzer',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.hsr__k{padding:0 12px 10px;font:400 12px/1.3 'Switzer',sans-serif;color:#6a665f}
@container (max-height:230px){.hsr{padding:14px 14px;gap:12px}.hsr__row{padding:7px 10px 1px}.hsr__k{padding:0 10px 7px}}
@container (max-width:380px){.hsr__row{flex-direction:column;gap:1px}.hsr__n,.hsr__p{font-size:12px}.hsr__k{display:none}}
@media (prefers-reduced-motion:reduce){.hsr__card{transition:none}.hsr__card:hover,.hsr__card:focus-visible{transform:none}}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 →