make an image white with css using filter brightness and invert

make an image white with css using filter brightness and invert Demo

View Demo Full Screen View Demo New Tab

make an image white with css using filter brightness and invert Code

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;
}