Sometimes you want one image to be replaced by another as soon as you move the mouse over it (“roll-over effect”). Possible uses are e.g. optical illusions, or before and after pictures.

To help create this effect, I wrote a simple generator for it. Unfortunately, this was more than 15 years ago (around 2005), so it is no longer up to date nor functional. As a replacement, here is a list of links to other roll-over generators that serve the same purpose.

Generators for roll-over effects based on JavaScript

The following generators all take multiple images and exchange them using JavaScript as soon as users move the mouse over them.

Roll over generators in pure CSS

Roll-over effects (nowadays called hover effect) are actually more likely to be created on modern websites using pure CSS. Most of the time, however, you need to know a little bit more about what you are doing. And unfortunately there are not so many generators for this technique, with which one can cover just as many purposes.