Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
1
Dugidem
@DeeNue36

All comments

  • Shravan Ajit Chinchkar•130
    @shravanchinchkar
    Submitted 11 months ago
    What specific areas of your project would you like help with?

    I want a help in "How to change the fill of an svg when it is hovered"

    Product-List-Cart

    #react#tailwind-css
    1
    Dugidem•250
    @DeeNue36
    Posted 11 months ago

    To be able to fill an svg image on hover you have to use it as an <svg> element and not an <img> element. Open the svg image in your browser, open devtools and copy what you see or open it in your code editor and copy it. Give the <svg> element a class or an id then add a "fill-rule" of nonzero or evenodd to the path of the <svg>. You can take out the fill color from the path and put it in your class style, :hover should work now.

    Let me know if this helps.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub