Support » Thema en CSS/opmaak » Afbeelding zwart/wit en als hover gekleurd

  • Opgelost Bas

    (@basz85)


    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

    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)

    Het is gelukt. Bedankt Jeroen!

    Vriendelijke groet,
    Bas

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