Design comparison
Solution retrospective
hii everyone..
- one thing I could not do is When hovering over the svg image(social links in footer) , the image's color will change to green.
- how will i do it ?
- let me know if you find any areas in codes that you think can be improved.
- waiting for feedback.
Community feedback
- @Enmanuel-Otero-MontanoPosted 12 months ago
Hello @Subhsree!
It is difficult to achieve the same challenge by putting the social media icons as images (<img> tag), you can change the color using properties like filter and drop-shadow, but this will apply the set color over the entire image, which It will not be as the design requires.
I think the ideal solution would be to put the icons directly as svg and then use the fill property on the hover
Example:
.footer__container-socials--svg:hover { fill: hsl(171, 66%, 44%); }
Share the link to my solution so you can understand better.
Greetings, I hope it helps you.
Marked as helpful0@SubhsreePosted 12 months agohello @Enmanuel-Otero-Montano Thank you so much for your helpful feedback.after seen your solution now i just found which areas i need to improve my coding.. once again thank you so much for your time and feedback.
1 - @rakeshdeepPosted 12 months ago
Hey @Subhsree , You can use masking property of css for changing color on hovering a svg image. It will give you 100% same result as you want. It's not that much difficult as you thinking 🙂
0
Please log in to post a comment
Log in with GitHubJoin 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