Looking to hire developers?
hey everyone, hope you all are doing good, slowly getting the hang of how to layer pages yayy. I have a question regarding svg how can I change the color of it when I hover them I could only change the background color, please if you have any suggestions and ways I could have done this project better please comment and tell me would really appreciate it thank you and hopeyou have a good day/night.
@AntoineC-dev
Posted
Hi Oduh Precious. Congratulations on completing this challenge.
To change the color of an svg using classes, you need to remove the hardcoded colors in the .svg file and replace it with "currentColor". This way you can manage the color of the svg with the CSS color property like it was text.
Hope this is helpfull. Have a good day/night. Peace ✌️
@themusssee
Posted
Oh I see thank youuu. Please how do I remove the hard coded color?
@AntoineC-dev
Posted
@themusssee hey, open your editor (vscode, sublime text, atom, etc...) then navigate to you project and open the .svg file in there. You will see that it is just some text and more precisely an html component.
Search for colors in this text ; they look like this #333333 and change them to currentColor.
Hope it helps.
Peace
Marked as helpful
@themusssee
Posted
@AntoineC-dev okay thank you very much!!!! Hope you have a great day/night
@AntoineC-dev
Posted
@themusssee no problem.
I forgot to mention that for this solution to work you need to replace the <img src="my-svg.svg" /> with the svg itself (the text i talked about in the previous comment). This is called using an inline svg in your html.
@themusssee
Posted
Oh thank you very much, hope you have a good day/night
@TheMrBombastic
Posted
You can use background-color on pictures, but to see this they have to be transparent. Or you can chane the image, css does this with a background image command:
.svg{
width: 200px;
height: 100px; (your picture dimensions)
backgroundpicture: url(images/image1.svg);}
.svg:hover{
backgroundpicture: url(images/image2.svg)}
this should work:)
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
