Wil je je kleurenfoto’s, logo’s of andere afbeeldingen in zwart-wit weergeven? Je hoeft dan niet ingewikkeld te doen door je foto of afbeelding te editen. Je kunt het namelijk gewoon oplossen met CSS:
img {filter: grayscale(100%);}Wil je slechts een enkele afbeelding of een paar afbeeldingen in zwart-wit weergeven, voeg dan een class toe aan je afbeelding, bijvoorbeeld class=”greyscale”. Je CSS code wordt dan:
img.greyscale {filter: grayscale(100%);}Voorbeeld zwart-wit afbeelding
Beken kleur met een mouse-over
Je kunt ook nog een afbeelding zwart-wit tonen, maar bijvoorbeeld in kleur wanneer je er met je muis overheen gaat. Wanneer je dit doet, bedenk dan wel even dat je op een mobiel apparaat (telefoon of tablet) geen mouse-over hebt. Maar dit gezegd hebbende: Stel, we willen een afbeelding in zwart wit tonen, maar zodra je er met de muis overheen gaat moet hij gekleurd getoond worden. We gebruiken hiervoor dezelfde afbeelding, maar zullen nu een andere class maken. Wanneer je :hover achter je class zet kun je aangeven wat er moet gebeuren bij een hover (dat is een mouseover).
img.coloronhover {filter: grayscale(100%);}
img.coloronhover:hover {filter: grayscale(0%);}Ga maar eens met je muis over bovenstaande afbeelding, je zult zien dat je dan de kleuren ziet.
Je kunt natuurlijk nog veel meer leuke dingen met afbeeldingen en CSS doen. Kijk maar eens hier.
Voor meer WordPress tips kijk je op mijn WordPress Tips-pagina.