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
Related Search Terms
Page Views

This page has been viewed 81 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
Most people can do absolutely awe-inspiring things,” he said. β€œSometimes they just need a little nudge.
Unknown