Om afbeeldingen of andere elementen op een WordPress website in grijstinten (wij noemen het ook vaak zwart-wit maar technisch gezien is dat hetzelfde) weer te geven met CSS, kun je de CSS-eigenschap filter gebruiken. Deze eigenschap maakt het mogelijk om verschillende grafische effecten toe te passen zoals vervaging, verzadiging en kleurverschuiving, direct vanuit je stylesheet, zonder de originele inhoud te wijzigen. Voor zwart-wit effecten gebruiken we het grayscale() filter.
Grayscale filter in CSS
Het grayscale() filter converteert de kleuren van een element naar grijstinten. Het percentage dat je aan grayscale() meegeeft, bepaalt hoeveel een kleur naar grijs wordt omgezet:
- grayscale(100%) maakt een element volledig zwart-wit;
- grayscale(0%) laat de kleuren van het element ongewijzigd.
Hoe gebruik je het filter grayscale?
/* Toepassen op een afbeelding */
.img-zwart-wit {
filter: grayscale(100%);
}
/* Toepassen op een div of een ander element */
.div-zwart-wit {
filter: grayscale(100%);
}
Grayscale bij hover gebruiken
Je kunt ook interactieve effecten creëren waarbij de afbeelding of het element verandert naar zwart-wit wanneer de gebruiker er met de muis overheen gaat (hover).
.img-hover-zwart-wit {
filter: grayscale(0%);
transition: filter 0.5s ease; /* Maakt de overgang soepel */
}
.img-hover-zwart-wit:hover {
filter: grayscale(100%);
}
Combineren met andere CSS filters
De filter eigenschap laat toe dat je meerdere filters combineert. Je kunt bijvoorbeeld grayscale() combineren met contrast() om de zichtbaarheid van zwart-wit afbeeldingen te verbeteren.
.img-geavanceerd {
filter: grayscale(100%) contrast(120%);
}
Browserondersteuning CSS grayscale filter
Het filter attribuut wordt breed ondersteund in alle moderne browsers, inclusief Chrome, Firefox, Safari, en Edge. Internet Explorer ondersteunt deze eigenschap echter niet.
De filter eigenschap biedt een krachtige en flexibele manier om visuele effecten toe te passen met alleen CSS, waardoor je dynamische en aantrekkelijke designs kunt creëren zonder de noodzaak voor beeldbewerkingssoftware of extra grafische bestanden.
Wil je meer weten over CSS Filter opties? Bekijk dan de W3school.