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.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis nooit meer website tips.

Al 500+ webdesigners en marketeers ontvangen onze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.