CSS rollover with a sprite image

• Apples
• Pears
• Grapes
• Bananas
• Peaches
• Plums

In this example, the anchor element is given some padding-bottom to provide space for the background image to display below the text. The image file contains two shapes, a semi-circle and a triangle. The background-position property controls which of the two shapes is visible. By default, the semi-circle is displayed but on hover, the position is changed to display the triangle.