Invert colors in a part of an image - HTML, CSS, JS

Question

Is there a way to invert only part of the image? I have a "selector bar" and I want the selected icon to be inverted. Unfortunately, this looks very bad when the panel switches to another selection, as the icon immediately changes color. The "selector" should slide along the strip during the transition.

A simple example of what I'm saying can be found here.

The best solution I can come up with right now is to place a new, inverted image on the selector element and move the image in the opposite direction in which the selector is moving. This would create the illusion that the fragment of the image that is covered is inverted. Is this really the best way to do this?

Answer 1

Create an element with zero width and height and outline: 8px solid invert . Then move this element around your selector and this will invert the material that it conveys.