Hover over the images to see the images swap

Pretty cool, eh?

This effect is created using a combination of CSS and JavaScript. When you hover, the Javascript adds a CSS class to the images’ parent container which triggers the CSS animation. When you mouseout, it removes that class and adds a different one which reverses the effect.

The images don’t actually swap, it’s a trick of the eye. The images move position so that halfway through the animation, they’re on top of each other. At that point, they swap z-indexes, then move back to their original positions, creating an illusion of sorts.