Home / Questions / 163706
Accepted
Andrés Vélez
Asked: 2020-05-12 12:07:14 +0800 CST 2020-05-12 12:07:14 +0800 CST

Change colors to image with css

  • 772

I was sent the following sketches, and the colors of the images change when the menu is opened.

enter image description here

As you can see there the images of the social networks and contact us is fuchsia.

enter image description here

But when the menu is opened the colors change to white, I know I can change by loading different images but they ask me with styles, and I don't know how I do it without using photoshop...

css

2 Answers

  1. Best Answer

    If they are labels, you cannot change the colors. The best way is to have two types of icons, one fuchsia and the other white, and when the menu is opened, change the icon using javascript.

    now if the icons are classes from some typography blog like fontawesome if you can change the icon with "Color: #000"

    • 1

  2. Another alternative is to make the icons in negative with transparent PNG and change their background color (although this won't work if they change the background and color of the icons)

    Or use svg images, which you can change the color via css (but only putting them inline, without referencing them)

    Or that you include them in the CSS as base64 images, if they are few and/or small, and put them as a background.

    Or use regular PNG images and use the CSS filter functions to change their color http://html5-demos.appspot.com/static/css/filters/index.html

    • 0