A stack of photos.
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:
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.
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.
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.
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 :
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.
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.
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.
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 :
To help you get a better feel for what this all does, tweak various values and see what the effect is.
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.
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!