2021-04-01
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.
Comments