Title: Afbeelding zwart/wit en als hover gekleurd
Last modified: 20 mei 2021

---

# Afbeelding zwart/wit en als hover gekleurd

 *  Opgelost [Bas](https://nl.wordpress.org/support/users/basz85/)
 * (@basz85)
 * [5 jaren, 4 maanden geleden](https://nl.wordpress.org/support/topic/afbeelding-zwart-wit-en-als-hover-gekleurd/)
 * Hi,
 * _Dit topic zou eventueel bij ´code oplossingen´ kunnen, maar vond het meer met
   css te maken. Als het niet in de juiste topic is, dan mag je deze verplaatsen._
 * Ik wil een effect in de foto´s van behandelingen op de homepage. Wanneer men 
   over de foto´s heen gaat dat het in kleur (hover) en standaard zwart/wit.
 * De originele foto´s zijn in kleur.
 * Het thema wat ik gebruik is GeneratePress en enkel Gutenberg-editor. Klant´s 
   website kleuren is zwart/wit (minimalistisch en uniseks). Helaas kan ik niet 
   de link hier plaatsen (staging is lokaal en niet extern bereikbaar).
 * Ik heb zelf geprobeerd, maar kom er niet uit. Heeft iemand een algemene css code
   voor mij betreft de afbeeldingen?
 * Vriendelijke groet,
    Bas

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)

 *  Moderator [Jeroen Rotty](https://nl.wordpress.org/support/users/jeroenrotty/)
 * (@jeroenrotty)
 * Support Moderator
 * [5 jaren, 4 maanden geleden](https://nl.wordpress.org/support/topic/afbeelding-zwart-wit-en-als-hover-gekleurd/#post-12175019)
 * zo iets als
 *     ```
       img.grayscale {
         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
         filter: gray; /* IE6-9 */
         -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
       }
   
       img.grayscale:hover {
         filter: none;
         -webkit-filter: grayscale(0%);
       }
       ```
   
 * Zie stackoverflow: [https://stackoverflow.com/questions/7273927/image-greyscale-with-css-re-color-on-mouse-over](https://stackoverflow.com/questions/7273927/image-greyscale-with-css-re-color-on-mouse-over)
 *  Thread starter [Bas](https://nl.wordpress.org/support/users/basz85/)
 * (@basz85)
 * [5 jaren, 4 maanden geleden](https://nl.wordpress.org/support/topic/afbeelding-zwart-wit-en-als-hover-gekleurd/#post-12175115)
 * Het is gelukt. Bedankt Jeroen!
 * Vriendelijke groet,
    Bas

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)

 Het onderwerp ‘Afbeelding zwart/wit en als hover gekleurd’ is gesloten voor nieuwe
reacties.

## Tags

 * [css](https://nl.wordpress.org/support/topic-tag/css/)
 * [image hover](https://nl.wordpress.org/support/topic-tag/image-hover/)
 * [kleur](https://nl.wordpress.org/support/topic-tag/kleur/)
 * [zwart en wit](https://nl.wordpress.org/support/topic-tag/zwart-en-wit/)

 * In: [Thema en CSS/opmaak](https://nl.wordpress.org/support/forum/themas-en-templates/)
 * 2 reacties
 * 2 deelnemers
 * Laatste antwoord van: [Bas](https://nl.wordpress.org/support/users/basz85/)
 * Laatste activiteit: [5 jaren, 4 maanden geleden](https://nl.wordpress.org/support/topic/afbeelding-zwart-wit-en-als-hover-gekleurd/#post-12175115)
 * Status: opgelost

## Onderwerpen

### Meest populaire onderwerpen

### Onderwerpen zonder reacties

### Non-support onderwerpen

### Opgeloste onderwerpen

### Onopgeloste onderwerpen

### Alle onderwerpen