Stacked/tilted photo effect on image.

[grimski]

Heres my CodePen of the problem I’m having:

http://cdpn.io/raIjG

**Overview:**
I’ve got 2 versions of markup to make a pile or stack of photos effect just using CSS. Using a Pseudo class to add a tilted frame behind an image.

**Example 1:**
This version seems to work the best, with the exception that I need to use box-sizing: border-box; – as the padding adds extra width so the photo will break out of its containing div. Because of the width and padding on the image – I’ve added width: 100%; to demonstrate this.

**Example 2:**
Uses slightly different CSS. With the majority of the styles set on the .stack div rather than the img tag. At first this looks to work just as well and doesn’t need box-sizing added to it. The problem comes when it is contained in another div with a background (See version with red background). Where the tilted photo effect gets lost behind the background. Note, this does not happen on Example 1 with the red background.

So it seems like _Example 1_ is the way to go…

I need to support older browsers though and there will be many images/boxes throughout the site styled like this. Which means on older browsers they’ll all break out of their containing box. I’d like to avoid having to correct this if possible! So it there a way of getting the z-index’s in Example 2 to play nice? I’m guessing this will also be an issue though as there is no sure way of knowing how many divs with surround the ‘stack’ code.

If I have to use box-sizing, fine I guess. _I don’t need the whole old browser talk_ ;) But I figured it’d be worth looking into if this could be done without.

Thanks in advance,
Steve

[Author]

Posts