Houtdruk Linda & Arne

003 afbeelding van zwart-wit (grayscale) naar kleur on :hover

CSS heeft hele fijne filters (check hier meer filters), waaronder een grayscale filter! Dat betekent dat je bijvoorbeeld super simpel alle afbeeldingen op een pagina zwart-wit kunt maken 🙂 Vet handig als je een bepaalde uniformiteit wilt bereiken.

website Anymation door ILUZIE - Homepage
Website jara.nl - door ILUZIE (artwork Marileen Arbouw)
website The Youth Company - homepage - website door ILUZIE
website Frank Allart - Kleuren - website door ILUZIE

Je kunt er dan ook weer met :hover voor zorgen dat hij zijn grayscale filter ‘verliest’, en dat de afbeelding dus weer gekleurd wordt, als je er overheen gaat met je cursor. Bovenstaande afbeeldingen hebben allemaal een class gekregen van grayscale-image, zie hier bijvoorbeeld een image tag:

<img class="alignnone wp-image-4883 size-large grayscale-image" src="https://www.iluzie.nl/wp-content/uploads/2019/09/website-Anymation-door-ILUZIE-Homepage-1030x685.png" alt="website Anymation door ILUZIE - Homepage" width="1030" height="685" />

Hieronder vind je de bijbehorende CSS:

.grayscale-image {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 1s ease;
}

.grayscale-image:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
   transition: all 1s ease;
}

Nieuwe blogposts in je mailbox ontvangen?

* velden met een asterisk zijn verplicht, wil je deze beiden invullen?

Nieuwe blogposts in je mailbox ontvangen?

* velden met een asterisk zijn verplicht, wil je deze beiden invullen?

Misschien vind je dit ook interessant:

Mijn website gebruikt een aantal cookies. Je kunt ervoor kiezen om ze te accepteren, of om ze te weigeren:

Cookie instellingen

Hieronder kun je kiezen welke cookies je wilt toestaan op deze website. Klik op 'Cookie instellingen opslaan' om je keuze toe te passen.

FunctioneelMijn website gebruikt functionele cookies. Deze zijn noodzakelijk om de website te laten werken.

AnalytischMijn website gebruikt (geanonimiseerde) analytische cookies, deze maken het mij mogelijk om het websitegedrag van bezoekers te analyseren en op basis hiervan mijn website te verbeteren.

Social mediaMijn website maakt gebruik van Vimeo, zodat ik filmpjes kan embedden. Deze derde partij plaatst cookies voor analytische doeleinden.

AdvertisingOur website places advertising cookies to show you 3rd party advertisements based on your interests. These cookies may track your personal data.

OtherOur website places 3rd party cookies from other 3rd party services which aren't Analytical, Social media or Advertising.