Afbeelding Mask

Hebben onze designers een super mooi design gemaakt maar heb je er afbeeldingen instaan met super rare vormen, of wil je zelf gewoon een mooi vormpje gebruiken als masker van de afbeelding? Kopieer onderstaande HTML en CSS om tot je gewenste resultaat te komen.

Hoe te gebruiken?

Exporteer de SVG code van het gewenst masker uit je XD bestand en kopieer onderstaande HTML en CSS als voorbeeld.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<nc-image name="TODO:" attributes="class=mask" width="991" height="991" loading="lazy"></nc-image>

CSS
Kopiëren.mask {
-webkit-mask: url('assets/blob-test.svg') no-repeat center;
 mask: url('assets/blob-test.svg') no-repeat center;
 -webkit-mask-size: 100%;
 mask-size: 100%;
}