A hidden image trick for Internet Explorer

I've recently remembered a very neat trick with images which is probably not so useful, but still interesting nevertheless. There's probably no practical application for it - it's just fun :) A result of this tutorial will be an image that, when selected in Internet Explorer browser, changes to another image. There is no scripting or programming involved - just a single image that magically changes to another on selection. This technique doesn't work well with all images, but since it's just fun - who cares! :) Let's just find two images that work and do something with them. Actually, if you use a Filter > Render > Clouds for the first image and some grayscale picture for the hidden - it will most likely work just fine. But before we begin, let's have a look what we will be making. Open this page in Internet Explorer (i know i know, it's a sin, but God will forgive you) and hit CTRL+A to select all the stuff. You will notice that the image below changes to something else:

Open this page in Internet Explorer and press CTRL+A
to see a hidden image

So let's begin creating this magic :) We'll need two images. I found that grayscale works pretty good so let's use this image as an original and hide this image inside. The first thing we will do is crop both images so that they were the same size. I'm going to be working with rather small images to fit in this page (i won't be able to resize them later easily), but you can work with originals if you want. I'm gonna convert both of these images to 450x250. I'll show you how to do that with the first one. Open any of the two images in Photoshop, grab the crop tool

from the tools palette and set the dimensions in the tool settings panel:

Now draw a crop rectangle around an area you want to leave intact (everything else will be cropped). When you draw the rectangle, you'll notice that its aspect ratio is fixed - that's because we've defined the dimensions we want to use and Photoshop now sticks to the same ratio. Here's the area i've decided to leave in the first image:

Press ENTER to apply and you'll notice that the cropped image will automatically be resized to the desired dimensions (in my case it's 450x250). Do the same with the other picture. OK now go back to the picture with the girl's eyes and copy it (CTRL+A, CTRL+C). Then go to the picture with the girl and a cat and press CTRL+V to paste on a new layer. The girl with the cat should now be on the lower layer and the eyes should be on top. If the bottom layer has a little lock icon next to its title, double-click it to unlock. Rename these layers so that you don't get confused: rename the top one to original and the bottom one to hidden. Now create a new layer and move it all the way down. Fill it with white (D, X, ALT+BACKSPACE). Here's what you have so far:

Time to add some magic. Create a new document with the size of 2x2 pixels. Yes, you've read right - 2x2 :) Zoom in lots of times and grab the pen tool

from the tools palette. Draw a mini black and white checkboard like this:

Now click on Edit > Define Pattern ..., give it a name and click OK. You can close this document, we don't need it anymore. Go back to the document we're working with and create a new layer above the hidden layer. Name it pattern. Go to Edit > Fill ... and fill this layer with our checkboard:

Change the pattern layer's blending mode to exclusion and here's the layer structure so far:

To increase the stealth of the hidden image, we'll render some clouds on top of the original. Create a new layer on top of everyghing else, press D and go to Filter > Render > Clouds. Change the blending mode to screen and the opacity to about 40%:

With the topmost layer selected, press CTRL+E to merge it down with the original layer. Now change the opacity of the original layer to about 70%:

We're almost done. If we tried the effect now, we'd see an inverted version of the girl with the cat. To fix this, select the hidden layer and invert its colors (CTRL+I). Last thing to do is to save this image as a high quality graphics. So a PNG format is probably the best solution. Save it and open in Internet Explorer. Then press CTRL+A to select the entire document and the girl with the cat should be revealed.

Open this page in Internet Explorer and press CTRL+A
to see a hidden image