What are the ways to replace the black image with white using css with :hover ?

I use this method (not very good, because you need to upload 2 images):

 .img { display: block; } .img_hover { display: none; } .box:hover .img { display: none; } .box:hover .img_hover { display: block; } 
 <div class="box"> <img src="https://dummyimage.com/200x200/000/fff&text=black" alt="" class="img"> <img src="https://dummyimage.com/200x200/fff/000&text=white" alt="" class="img_hover"> </div>

Maybe there is a way using the filter or some other options? The picture should be exactly inline (not the background) and the effect should be maximally cross-browser.

  • My version in IE doesn't work - Grundy
  • @Grundy, while others seem to have no options. - HamSter
  • In general, IE had its own DXImageTransform filters for example, but they somehow did not want to work with me - Grundy

1 answer 1

You can use the invert() filter

 .img:hover { filter: invert(100%); } 
 <div class="box"> <img src="https://dummyimage.com/200x200/000/fff&text=black" alt="" class="img"> </div>

This code will not work in IE (everything is fine in EDGE), as it has its own filters. Judging by the help for IE, the style should use the BasicImage filter with the invert property

But my reference example did not work:

 .img:hover { filter: progid: DXImageTransform.Microsoft.BasicImage(Invert=1); } 
 <div class="box"> <img src="https://dummyimage.com/200x200/000/fff&text=black" alt="" class="img"> </div>

It is also indicated that since IE10 such filters are obsolete and disabled by default.