Afterimage Illusion




Introduction: Afterimage Illusion

About: Build.Share.Destroy.Repeat. Follow me and try a few of my projects for yourself!

An afterimage is the persistence of a picture or shape after exposure to the original picture or shape has been removed. You've probably seen them before after looking away from a bright light and still being able to see a halo or glow in your vision. This phenomenon also happens with colours. Wikipedia defines afterimage as "prolonged viewing of a color induces an afterimage of the complementary color (for example, yellow color induces a bluish afterimage)."

Here's an example of an afterimage I made:

Mouse over image and stare at white dot for 30 seconds.
Move mouse off image and stare at B+W image to see colour.

Why does this happen?

Afterimages occur when the photoreceptors in our eyes are overstimulated and become fatigued. In everyday life your eyes are moving around and focusing on thousands of things every minute, allowing the rod and cone cells (photorecptors) to stay stimulated by an ever changing array of information. However when you focus on a picture the cone cells (used for colour) in our eyes become overstimulated. After a short period of time (about 5 seconds) these cone cells are only sending a weak signal to your brain telling you what colour you are looking at, making the colours seem muted. When you move your eyes to a blank space like a wall the photoreceptors compensate for this change in information and the brain interprets these new signals as colours complementary to what you were just viewing (an opposite, or negative).

The read on negative afterimage is fascinating stuff. Here's some further source information to enlarge your brain.

Making your own negative afterimage is a great way to demonstrate how our eyeballs work, or just have fun with your latest vacation pictures.

Step 1: Simple Negative Afterimage

Open an image in any photo editor and duplicate the layer twice, make one of the new layers desaturated and invert the colour of the second. I did this in Photoshop, but I've provided links to free alternatives.

Duplicate layer (make 2 additional layers):

Desaturate first layer:

  • Photoshop: ctrl + u
  • PIXLR: ctrl + u (saturation to -100)
  • GIMP: ctrl + shift + u
  • Paint.NET: ctrl + shift + u (saturation to -100)

Invert second layer:

  • Photoshop: ctrl + i
  • PIXLR: ctrl + i
  • GIMP: ctrl + shift + i
  • Paint.NET: ctrl + shift + i

Step 2: Add Focal Dot on Inverted Layer

In the center of the inverted layer add a visible dot. Make sure the dot is identifiable and a neutral colour. I went with a white dot with a black outline to make it really stand out.

Step 3: Save Layers As New Images

Save the desaturated and inverted versions of your photo as separate images.

Step 4: Make a Rollover Image

To make a rollover image like I did in the intro step you'll need to use a little HTML. The "mouseover" HTML command determines what image is displayed when you move your mouse over the image, and which image to display when the mouse is moved off the image.

I've pasted the code I used below, you'll need to change the capitalized letters and underscores to wherever your file is located.

<pre><img onmouseout="this.src='LOCATION_OF_IMAGE/DESATURATED_IMAGE_NAME.jpg'" onmouseover="this.src='LOCATION_OF_IMAGE/INVERTED_IMAGE_NAME.jpg'">

I suggest hosting your files online, then copying the file locations into this code.

An example would be:

Step 5: Make a GIF

I've made an entire Instructable about making your own animated GIF's. It's super easy to do, and there's a few options:

Have you made your own negative afterimage? I want to see it!

Happy making :)

Full Spectrum Laser Contest

Participated in the
Full Spectrum Laser Contest

6 People Made This Project!


  • Rice & Grains Challenge

    Rice & Grains Challenge
  • Lamps Challenge

    Lamps Challenge
  • CNC and 3D Printing Contest

    CNC and 3D Printing Contest



Question 5 months ago

Is this the same as the Amy Whitehouse after image illusion?


8 years ago on Introduction

<pre><img onmouseout="this.src=''" onmouseover="this.src=''">

Reply 8 years ago on Introduction

couldn't do the code.. *signs*

so here are the images and the gif

photo0194.jpgphoto0194cc c.jpg
Matt Makes
Matt Makes

8 years ago on Introduction

Hello Mikeasaurus,

Thank you very much for posting this cool instructable, I think these after images are amazing! I'm trying to use the roll over code you posted in an instructable I'm making to show how something that glows in the dark looks in the day and in the night. I'm having a bit of trouble making the code work. could you please provide explicit instructions on how you added the roll over images to this instructable?


Reply 8 years ago on Introduction

The exact code is in Step 4. Here it is in context of my example

<a href="">
<img onmouseout="this.src=''"
src="" /></a>


Reply 8 years ago on Introduction

Wow, those colours really POP!

Thanks for sharing, enjoy the patch and Pro Membership.


8 years ago on Introduction

i saw a simple demonstration of this effect in the perception chapter in my psych 101 text many years ago. this is rather elegant. i was surprised at how well this worked. eerie! i'm thinking i could make a screen saver with a slide show on a 30 second cycle? hmmm


Nice instructable, the effect is very interesting on some images