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

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 683 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca