Skip to content
Submitted almost 2 years ago

Article Preview

JJ•160
@JeremyPaymal
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello,

I tried to use "fill" in order to change the color of the arrow for the share button, but I did not work unfortunatly.

Any advice ?

Otherwise, how can I improve this code ?

Thanks !

JJ

Community feedback

  • Matjaz•230
    @rubuzPosted almost 2 years ago

    Hi JJ,

    Because you used <img> tag with SVG source, you can not use fill to change the color of an image. Fill works only on <svg> tags.

    Or you can use the filter property to alter the color of an image. It's some kind of workaround. You can use this tool: https://codepen.io/sosuke/pen/Pjoqqp

    For your code, you can try with this:

    .share_btn:hover{ background-color: #48556A; }

    .share_btn:hover img { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(165deg) brightness(105%) contrast(101%);}

    Hope you will find this useful. :)

    Marked as helpful
    1
    JJ•160
    @JeremyPaymalPosted almost 2 years ago

    @rubuz Hello,

    I'll try this !

    Thks.

    JJ

    0

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