Hiding In Plain “Site”

I’ve written a program called PicInHTML, which makes web pages with concealed images which are shown when text on the page is selected. What’s clever about these page are how they work: they’re a single file, with no dependence on images nor Javascript, and they work by leveraging the little-used ::selected CSS selector. Each individual letter on the page is given a CSS class to associate it with the colour of a corresponding pixel in the source image, and selecting the text changes the background colour to that pixel colour.

That’s a wordy way of putting it. Let’s try an example:

Give it a go on any of the following pages. You’ll need to not be using Microsoft Internet Explorer, I’m afraid, as it doesn’t support the ::selected CSS selector. All you have to do is select the text on the page to reveal the secret image!

• The Memorial
• Mona
• A Geocacher

If you’re interested in the mechanics of how it works, or you’d like to get a copy of the source code and have a play yourself, see my project page on PicInHTML. You could also try looking at the source code of any of the pages, above: they’re not too-hard to read, especially for machine-generated code.

×