Introduction

CSS provides a whole variety of different tools which we may put together in different ways to create all manner of different things. In this challenge we will build a board with photos scattered over it to show off some images.

You will investigate the following concepts:

• Absolute positioning
• Drop shadows
• Layering
• Hover
• Animations

Keep in mind that although we are using these methods to create a photo board, all of these methods can be applied and work just the same on pretty much any other element on your page. Be creative and you can do some very interesting things on your pages with these.

If you haven't done much with HTML and CSS you may want to have a quick run through our HTML tutorial and CSS tutorial before working through this challenge.

Step 1 - The Template Code

Copy the starting template code below into a text file (remember to save with a .html extension) and open it up in a browser to see what it looks like.

The default colours and heading style I've set is fairly ordinary, feel free to improve the colours to your liking. You could look at adding a border to the photo board as well.

For each of the steps below, make sure to save and view the file regularly so see what affect the elements you are adding and changing has on your page.

At the moment we have some simple content with a heading and a board to place our photos on. Over the rest of this challenge we will add photos and style them using CSS. If you really want to look at doing things right you might also investigate moving the CSS to an external linked file.

Step 2 - Adding your first image

First off, grab an image to include on your photo board. Place it in the same directory as your .html file. Copy the code below and place it between the div tags in the body of your page.

• <img src="picture name here" width="200px" id="picture1">

Replace picture name here with the file name for your picture. You can also change the width to alter the size of your picture if you like.

Refreshing your page you should see an image in the top corner. Now we are going to move it to a random location on our deck. To do so, copy the CSS rule below and paste it just below the rules for #pictures within your style tags.

Adding this in will place your image 20 pixels from the left of the board and 50 pixels from the top. Tweak the values and see that it adjusts the location accordingly.

If you're inquisitive, you're probably wondering "could I change left to right, or could I change top to bottom?". Well go ahead and try it and see what happens.

To place your images you may use any combination of the properties :

• top or bottom
• left or right

Experiment with these properties now and and move your image all over the board.

Now add some more photos. Make sure each image has a unique ID (just increment the number for each one is the easiest way to do this). Spread the photos out over the board as well.

Step 3 - Rotating images and adding depth

Having all the images sitting straight is boring. Let’s rotate them a bit, as if they were just thrown onto the stack, and add some drop shadow to create some depth.

To rotate the images, add the following CSS property to each of the sets of rules for your images.

• transform: rotate(20deg);

Give each of your images a different rotation to create a more natural look.

There are many other things you can do with transform, not just rotation. If you do a quick Google search you can discover all the other ways you can transform an element. These transforms can apply to any item on your page as well, not just images.

Now we’ll also add some depth. Copy the following rule and paste it just before your closing style tag.

This will apply a rule to all the images in one go instead of having to add it to each of your images individually.

You should always be on the lookout for opportunities to structure things so that you do things once but have it apply to many things. It's less work for you, makes your code cleaner and easier to manage, keeps things consistent and makes experimenting easier too.

Now tinker with these shadows and see what effects you can create. You should end up with a rather nice looking stack of photos.

Step 4 - Let's make it interactive

Now we'll make the images jump out when you hover over them. Copy the following rule and paste it just before your closing style tag.

There's a bit going on here so let's break it down :

• The transform property will unrotate your image and increase it's size a little to create the illusion that it is being lifted off the board.
• The transition-property property indicates that this property should be animated from it's previous value. (you may transition many properties, not just transform)
• The transition-duration property sets how long the transition will take.
• The z-index property affects which layer the element is on. A higher value is closer to the user and a lower value is further away. 2000 is just an arbitrary value which should be higher than everything else on the page.
• We have also modified the box-shadow a little to enhance the illusion of the image being lifted from the board.

To help you get a better feel for what this all does, tweak various values and see what the effect is.

Step 5 - Tinker!

Now play about. Add more photos in. Change values and see what types of effects you can create. Make your photo board as visually appealing and fun as you can. Maybe add borders around your images. Improve the look of the heading.

If you're creative you could look at adding in an easter egg. Maybe a particular image behaves differently from others when hovered over. Or maybe hovering over some images reveals hidden images beneath them.

Taking it Further

Instead of positioning all the images by hand, why don't you investigate using JavaScript to randomly scatter the images over the board.

Instead of images, could you make a similar board but with inspirational quotes?

Experiment and see what you can come up with. Have fun!