• 2021-04-01

    Invert icons on hover

    Author

    Comments

    Start a discussion

    Hover the icon below and it will be inverted to white. The trick is to use filter: invert(1);.

    HTML

    <figure>
      <img src="http://csspoo.com/assets/images/remixicons/link.svg">
    </figure>

    CSS

    figure {
      display: inline-block;
      padding: 1rem;
      background: #eee;
    }
    
    figure img {
      filter: invert(1);
      vertical-align: top;
    }
    
    figure:hover {
      background: #000;
    }
    
    figure:hover img {
      filter: invert(0);
    }

    Sources

    You saw it on CSSPoo first.