Midterm Tutorial

Hi guys today I am going to show you how to create sliding pictures by using css. There was a lot of awesome tutorials online but I thought this one was cool and I would like to share it with you. Here is a demo of what we are going to do.  I will have the pictures in a folder and will put it in the transfer drive.

First we have to open up dreamweaver and make a new page. We are going to make a div class for the h1. We are going to name it "Picture Gallery". Instead of making a separate css were going to do it on the same page.
                                           

It will start to look like this.

                       

At the bottom of h1, we are going to make 8 boxes with a tag called "boxes". We are going to make a class outside the "boxes" tag called "pics".

For the "boxes" we have to add we have to add float, width, margin, and etc.

It will look like this. 

For the "pics" we have to add width and height.

After we added the width and height, it will look a bit organized like this.

Then we are going to add the pictures.

1.

2.

It will start to look like this.

Now we are going to make the box move when the mouse is over the picture.

We are now finished and it will look like this. (I put the mouse on the 3rd picture and it moved to the right to show the whole picture)