How to achieve a photo "stack" border effect with CSS?

Question

I'd like to be able to add a class to images that adds a border that makes them look like a stack of photos. Anyone know how to do this?

Clarifications: Ideally something like the stack shown here but it doesn't need to be interactive and only needs to work for a single photo. I also don't mind using javascript if needed (jQuery would be preferred though).

Answer 1

Place your IMG tag inside a nested set of DIV elements (the number of divs will determine the number of photos in the stack). Then use CSS to set the border and padding so that the DIV elements get progressively larger than the photograph. Generally you will add more padding to the bottom and right.

Answer 2

The "depth" affect is probably going to be some type of drop shadow. Do you need to rotate the photos as well for the "messy photo pile" effect or are you looking for a "neatly stacked" look?

The "messy photo pile" effect seems to me to break down into three components:

1. Put a background behind the image for the "polaroid" look (explained in other comments
2. Put a drop shadow behind the image for the "depth" effect (explained above and in other comments
3. Rotating images. I've never done this myself but it looks like someone has coded the Jquery plugin you are looking for.

Answer 3

CSS3 it's supported by everyone yet, but you might want to look into border-image.

Answer 4

Put a div around the image and then have 2 styles defined.

<div class="img-shadow"><img ...></div>

.img-shadow {style.css (line 456)
background-color:#505050;
float:left;
margin:5px 0 0 0;
}
.img-shadow img {style.css (line 461)
background-color:#FFFFFF;
border:3px solid #000000;
display:block;
margin:-8px 8px 8px -8px;
padding:10px;
position:relative;
}

in the .img-shadow class, define a graphic for your background that's large enough for your images, and looks like a stack of photos. The above makes it look like the photo is casting a shadow.

Answer 5

If you want to use the latest CSS3 keyframe animations and transitions to achieve this, there is a cool, tutorial over at http://pmbennett.net/2010/05/28/css3-animated-photo-stack-with-jquery/