In the HTML file, we will be creating a
division (with <div> tags) that will become our rollover
image. You can also make the image into a link by creating anchor
tags (e.g. <a href="url">) before the open <div> and
close the anchor (e.g. </a>) after the closing </div>
In the CSS file, we will be creating two CSS
rules. The first will be changing the background of the division
to the image. We will also set the height and width of the
division to the height and width of the image, and ensure it does
not repeat. Finally, we will add a margin to give space around the
image.
The second CSS rule will incorporate the hover
pseudo-class, and will set the background of the division to the
image we want to appear when we place our cursor over the image.
|