





I recently figured it would be cool to make an image placeholder that looks like it’s on top of other images. I decided to fiddle around with the :before and :after pseudo-class selectors.

I quickly figured out that you apparently can’t use these classes on the img tag itself. You have to use them on a wrapper element. The final result looks like the demo below

See the Pen Stacked image effect using :before and :after by Creative Punch (@CreativePunch) on CodePen.

Since we can’t use :before and :after on the img tag, we style the img alongside its container.

The resulting code looks like this:







#img-container:before, #img-container:after, #img-container img.stacked { display: block; border: 10px solid white; border-bottom: 20px solid white; box-shadow: 0px 0px 5px rgba(0,0,0,0.5); }

We also need to make sure that our container div has the width and height of the image and that the :before and :after pseudo-class inherit this. We will also set a z-index and relative position. Placing them behind the main image.

#img-container { margin: 50px auto; width: 250px; height: 300px; position: relative; } #img-container:before, #img-container:after { content: ""; width: inherit; height: inherit; background: #000; position: absolute; top: 0; } #img-container:before { transform: rotateZ(-3deg); z-index: -1; } #img-container:after { transform: rotateZ(-7deg); z-index: -2; }

We also rotated the underlying polaroids by -3 and -7 degrees. Giving this image the appearance of laying on top of other images!