Image diffing using CSS

Since the last post on CSS was popular here is another simple CSS trick that I found useful in the past.

Let’s say we want to find the difference between these two images:

You can do this by simply inverting the colors and then stacking them together at 50% opacity. This can be achieved with a single CSS filter:
-webkit-filter: invert(100%) opacity(50%);

What you should get back is a gray image except for places where the two images differ. This works because inverting will flip the color (255 - c) and opacity will blend the two colors equally (c1 + c2 / 2). So the resulting color is ((255 - c1) + c2) / 2 which is just rgb(127.5, 127.5, 127.5) whenever the overlapping pixel colors c1 and c2 are the same.

Read rest of this post…