ISTA 230 Introduction to Web Design (Spring 2017)

Hover Effects

Using your understanding of CSS background images and pseudo-classes, you will be creating a virtual version of the classic "Mr. Potato Head™" toy.

Mr. Potato Head™, Version 1 Mr. Potato Head™, Version 1

The goal will be to provide a default image of Mr. Potato Head™ which will change as the user interacts with the image. All necessary files can be downloaded here.

You have been provided with 12 images (in an 'images' folder), one CSS file (in a 'css' folder), and one HTML file. Much of the necessary CSS has already been provided for you. Your task is to create additional CSS rules to facilitate the following:

You are welcome to modify the HTML file, though it is not necessary to complete the exercise.

Solution

Solution can be downloaded here.