In this project we'll be developing the javascript and CSX based photo gallery the gallery has a set
of thumbnails at the top.
And a main preview image image displayed below.
When a user hovers their mouse over the thumbnail the main preview image changes to the corresponding
thumbnail.
There's also a hover effect on the thumbnails in some CSF styling for the borders background color and
text formatting before we get started.
You'll need to download the images folder that contains the images for this exercise From the downloads
folder.
Once you've done so you must place the entire images folder in the same directory that you'll be saving
your HDMI file into with that complete.
Let's go ahead and get started.
Create your basic HCM page structure and save the file you can give it any file name you like.
Next we'll need to create a style sheet for our page with several style rules.
The first rule will style the page elements
we've set the background color of the body to hex code 2 2 2 we've created a margin at the top of the
page.
We've set the default font family to aerial in the color of the the default font color to white.
The next rule here is a class definition for the thumbnails in this class.
We've defined the height as 80 pixels border is 4 pixels solid with the hex code of 5 5 5 1 pixel padding
and some margin on the left in the right so that's what gives us this look for for each thumbnail image.
Next we have a class for the hover effect on the thumbnails.
This will change the color of the border to a four pixel solid border with this hex code and that's
a light blue color in the last all we have here is the class that will style the main preview image.
We've given the preview image a border some padding and the width of eight hundred pixels.