Invert icons on hover

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.