Finished Rollover

The rollover above was created by using a base image, a rollover image, a combined image and some code.

The Base Image

Base Image
The rollover image is the image people will see by default, when nothing is active.

The Rollover Image

Rollover Image
The rollover image is the image with all hotspots active.

The Combined Image

Combined Image
The combined image is simply the base image and rollover image joined.
We will use CSS to first show only the top half (base) of the image and then to move portions of the image up to give the rollover effect. Back to rollover generator.