Create a stacked image effect in CSS3

Posted on Oct 20 2014 - 3:32pm by Eric Tompkins

css3 image effects

How to create a stacked image effect in CSS3

In this quick tutorial I am going to show you how to create a stacked image effect with only CSS3.

1. First we need some basic html markup:

Note the list classes as we will be targeting those with our CSS3.

2. Lets first size our images, add a border, and add a drop shadow:

That should make our images resemble photo snapshots.

3. Finally lets add the transforms to rotate our images by 10 degrees:

You should now see your images stacked and rotated. Way cool, right?

Here is the final code:

You could obviously play with this some more to create more effects. This is just a quick example. Have fun with CSS3.

By Eric Tompkins / @_codemics

About the Author

Eric Tompkins is an Experienced Web Developer and Digital Media Professional. As well as a Professional Photographer and Technical Instructor. You can follow on Twitter @_codemics.