0

Is there a way to invert only part of an image? I have a "selector bar" sort of thing, and I want the icon that's selected to be inverted. Unfortunately, this looks really bad when the bar is transitioning to a different selection, as the icon immediately changes color. The "selector" should slide along the bar while transitioning.

Simple example of what I'm talking about can be found here

The best solution I can come up with right now is to put a new, inverted image on the selector element, and move the image the opposite direction the selector is moving. That would give the illusion that the slice of the image that's covered is inverted. Is that really the best way to do it?

1 Answer 1

2

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

1
  • I was just reading up on this, seems it's only supported in IE9+ and Opera - all other browsers seem to have dropped support of it (and it's not a required spec). Any other solutions?
    – Ledivin
    Sep 14, 2012 at 21:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.