Osaro Iyoha• 1,080
@osaaroh
Posted
Hello Ernest,
Nice work so far! As you discovered, you will not be able to use the color or background-color css properties to modify the color on an <img> tag. However, if you use an img tag and want to change the color property from black to any other color, one workaround is to use css filter:
a:hover {
filter: invert(55%) sepia(87%) saturate(357%) hue-rotate(121deg) brightness(93%) contrast(92%);
}
You use the CSS Filter Generator(Codepen) from here and enter the color code you want to change to. It will generate a filter for you and you can use it on the image. Note that this works best when the image color is black/very dark.
- Alternative1: You can use icon fonts like Bootstrap Icons to use the "color" property to change the color like text.
- Alternative2: Using Inline SVG instead and "fill" property to change color
Hope this helps.
Marked as helpful
0
