Is it possible to emulate Mac Osx Finder search highlight in HTML + CSS?

Question

Mac OSX Finder has a search feature that darkens everything but the part that matches.

_{(source: justaddwater.dk)}

Is there a way to emulate it via CSS? I was thinking about adding a semi-transparent black div with opacity 50. But how then do I cut a hole in it?? and possibly make the edge fuzzy?

Any suggestions?

Answer 1

Check out the Expose jquery plugin from the jQuery TOOLS collection. I think it will accomplish exactly what you are looking for. They even have a demo of styling the mask with a background image.

Answer 2

Due to the irregular shapes, you're probably looking for an image. And due to the need for varying levels of transparency, you probably want a .png that would just be stuck over the selected item.

Good question, one way would be to have a "selected" png that had the glowing circle cover the selected one, and a different just dark png cover everything else.

EDIT: But you would probably want to use a library like jquery rather than coding everything from scrath your self, as to not reinvent the wheel and save TONS of time :D

Answer 3

maybe a PNG image will work, a square with hole