Afbeelding zwart/wit en als hover gekleurd

Opgelost Bas
(@basz85)

3 jaren, 4 maanden geleden

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

(@jeroenrotty)

Support Moderator

3 jaren, 4 maanden geleden

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

Thread starter

Bas

(@basz85)

3 jaren, 3 maanden geleden

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.

Afbeelding zwart/wit en als hover gekleurd

Tags

Onderwerpen

Meest populaire onderwerpen

Onderwerpen zonder reacties

Non-support onderwerpen

Opgeloste onderwerpen

Onopgeloste onderwerpen

Alle onderwerpen