CSS3 has truly given us far more capabilities than its predecessors. With transitions, animations, and shadowing, we can make some pretty awesome visual effects using nothing but the goodness it provides. Today, we’ll see how to create a rather good looking photo gallery using CSS3. Let’s dive in, shall we?

STEP ONE: Up the Page

We’ll start today’s tutorial by adding a background image into our HTML page. The HTML structure will continue to grow as we move along, however we’ll start with a clean slate. Here’s how the initial HTML looks like:

Nothing fancy at all here. The next thing we’ll want to do is to go ahead and add the background image that we’ll be using for our page today. This will be done in the CSS, and we’ll add it to the body selector. Here’s what the initial CSS should look like:

I find wood backgrounds to look really nice on photo sites, so that’s why we’ve chosen wood today. If you’d like, you could use any background image you want to.
(Images are available for download at the end of this tutorial)

STEP TWO:

Adding Photos to our Page

Notice that we’ve added the “image” Class to each of our photos. This will allow us to style each of them with a Polaroid effect by adding a rather thick, white border to them.

STEP THREE:

Styling with the Border Property

Let’s go ahead and make our pictures look more like Polaroids by adding some code to our CSS file:

Now load the page up in the browser and check out your super cool photo gallery! It’s not quite done, but honestly, even at this point it’s starting to look pretty good.
Step Three Preview in Browser

STEP FOUR:

nth-child Filter
Next, we’ll want to add a bit of rotation so that photos look randomly placed on the page. We’ll use CSS’s nth-child filter to help us out. Here’s what the CSS should look like now:

Great! Our images now have what appears to be a random rotation to them. The CSS nth-child is taking every 1st image and rotating it 2 degrees clockwise, and every second image and rotating it 5 degrees counter-clockwise.
Step Four Preview in Browser

STEP FIVE:

The Shadow Property
Let’s go ahead and add some shadows to our images to make them stand out from the page a bit more:

Have a look at the photos and you should see that we now have a very nice shadow surrounding each of them.
Step Five Preview in Browser

STEP SIX:

Rotating the Images

We can now start adding the final touches to our photos to make it a more interactive gallery. We’ll need to do some things to the :hover psuedo-selector so that we get some interactivity when a user hovers over one of the pictures. The first thing we’ll want to do rotate the images back to the default position. Here’s how that’s implemented in the CSS:

These 2 declarations are separate from the other nth-child declarations, and rotate a given photo back to the original position of 0 degrees. Go ahead and check the page to make sure the rotations are working.

STEP SEVEN:

Adding Transitions
Next up is the transitions. First, let’s add the declaration for the transition. Here’s what the CSS should look like now:

STEP EIGHT:

Using the Transform: Scale Property
The final step will be to add the “zoom” functionality, which is actually accomplished using CSS3 transform: scale property. We’ll need to add the property to both of our :hover psuedo selectors to complete the effect. Here’s how to add the final touch to the CSS:

Notice that we’ve also added a z-index declaration. This will make it so that the photo being viewed appears to hover above the rest of them, and then when the hovering is complete, falls back into place below the others.
Final Result

We’ve seen that using CSS3 can make a huge difference in the experience a user has when visiting your website. Things like transitions, shadows, and transforms truly bring depth into the experience, and provide some pretty cool ways to flesh out your ideas into reality. Join us next time when we talk about advanced CSS selectors, where you’ll learn more about things like :hover, :first-child, and :last-child. See you then!

Download Source Files