Search code examples
cssmacosfindersearch

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


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

alt text
(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?


Solution

  • 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.