Hoe maak je een afbeelding zwart-wit met CSS?

Voor een specifiek WordPress thema wil je alle afbeeldingen graag zwart wit (in grijstinten) hebben. Hoe je dat doet beschrijf ik in dit artikel.

Stel je hebt een mooi WordPress thema gevonden waarmee je je website een specifieke, misschien donkere uitstraling wilt geven. Of er is een aantal foto’s of afbeeldingen op je website, die in kleur niet zo goed uitkomen voor het totaalbeeld.

Je kunt dan alle afbeeldingen gaan bewerken in bijvoorbeeld Photoshop en ze zwart-wit maken. Voor 1 foto is dat natuurlijk niet zoveel werk, maar als je dit voor tientallen foto’s moet doen dan kost dit veel tijd.

Tevens is de vraag of je dit wel wilt doen, misschien wil je enkel alleen maar testen of zwart wit foto’s mooi overkomen op je website. Dan is het helemaal veel werk om foto’s te bewerken.

Een eenvoudige oplossing kan worden bereikt met behulp van CSS, je kunt deze stijl toevoegen aan een individuele foto, aan alle afbeeldingen of via een class aan een aantal door jou gekozen foto’s.

De CSS stijl die je gebruikt is filter:

img {
  -webkit-filter: grayscale(100%); /* Voor Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

Dit voorbeeld toevoegen aan je stijblad zorgt ervoor dat alle afbeeldingen 100% omgezet worden naar grijstinten.
Je kunt het percentage ook lager maken, dan zal er nog iets van kleur doorheen komen.

Kijk maar eens naar onderstaande afbeelding. De eerste heeft een filter van 100%, de tweede van 30%.

Bij bovenstaand voorbeeld heb ik de stijl aan de afbeelding zelf gekoppeld. Dit kun je dus gebruiken om individuele foto’s van een zwart-wit filter te voorzien:

<img src="/cool-african-woman.jpg" alt="afbeeldingen omzetten naar zwart-wit met css" style="filter: grayscale(100%);" />

Wanneer je deze afbeelding, en alle andere afbeeldingen die je verder wilt voorzien van dit filter een class meegeeft dan kun je in je stijlblad een class aanmaken en deze afbeeldingen zwart-wit maken en alle andere afbeelding, zonder die betreffende class, gewoon in kleur laten.

De HTML code van de afbeelding wordt dan:

<img src="/cool-african-woman.jpg" alt="afbeeldingen omzetten naar zwart-wit met css" class="zwartwitfoto" />

De bijbehorende CSS code is dan:

img.zwartwitfoto {
  filter: grayscale(100%);
}

Tenslotte nog een handige toevoeging. Stel dat je foto een link is (bijvoorbeeld als je foto een uitgelichte afbeelding is in WordPress), dan kun je makkelijk een muis over functie toevoegen waarmee je ervoor zorgt dat wanneer je met je muis over de afbeelding gaat deze weer naar kleur verandert.

a .zwartwitfoto {
  filter: grayscale(100%);
}
a .zwartwitfoto:hover {
 filter: grayscale(0%);
}

Je krijgt dan dit resultaat: