make an image white with css using filter brightness and invert
If you have an icon or something with transparency this can be useful if you dont want to have to edit the image and create another copy of it you can apply the filter brightness and invert.
You can see it uses the same image source to get this effect. This only really works with images that have transparency, otherwise it just makes the whole image white as there is nothing to invert.
Also added some transitions to this to make the changes a bit smoother.
HTML
<h2>Normal Image</h2>
<p class="image-bg"><img src="https://img.icons8.com/color/2x/share-rounded.png" class="normal-image"></p>
<h2>Inverted Image</h2>
<p class="image-bg"><img src="https://img.icons8.com/color/2x/share-rounded.png" class="inverted-image"></p>
<h2>Normal into Inverted when active</h2>
<p>Mouse over it to see the change</p>
<p class="image-bg"><img src="https://img.icons8.com/color/2x/share-rounded.png" class="normal-image-to-inverted"></p>CSS
.image-bg {
background:#444;
}
.inverted-image {
filter: brightness(0) invert(1);
}
.normal-image {}
.normal-image-to-inverted {
transition: all 0.3s;
}
.normal-image-to-inverted:hover {
filter: brightness(0) invert(1);
transition: all 0.3s;
}Normal Image
Inverted Image
Normal into Inverted when active
Mouse over it to see the change