Clipboard-Landing-Page Solution|| Build with Flexbox||Scss
Design comparison
Solution retrospective
I struggled on adding hover effect to the social links in the footer. At first, I thought it was an icon, and I decided to add hover effect to it and change the color on hover. However, it didnt work cause it is an image. I also added it to the parent element but i didnt like the outcome.
Any help on how to handle this would be helpful and also any feedback on my solution and how to improve it will be great . Thanks and happy coding 👍👍
Community feedback
- @osaarohPosted over 2 years ago
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.
B. Alternative Methods
- 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 helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord