Stacking z-index issues using :before

Question

For a live demo I've setup the fiddle here

http://jsfiddle.net/OwenMelbz/3PQHa/

Basically I'm trying to create a stack of 2 "photos" - Using purely CSS, cant touch the markup at the moment, but Its 99% of the way there, just a stacking issue.

I'm using :before to try position an element in the flow before my div and rotate it slightly, however its index is appearing on top of my element.

The fiddle shows this- I want the Red square to behind the white one

The markup is in the fiddle live, but heres it incase you want a quick look.

<div class="thumbnail-frame">
    <img src="http://placehold.it/420x420" alt="gallery test">
    <div class="details">
        <small>10/06/13</small>
        <h3>gallery test</h3>
        <small>2 photos</small>
         <a href="/gallery/gallery-1" title="">Open Gallery</a>
        <div class="share-buttons"></div>
    </div>
</div>

The CSS

body {
    background: lime;
    width: 470px;
    height: 470px;
    padding: 40px;
}
.thumbnail-frame {
    background:white;
    background-color:white;
    background:-webkit-gradient(linear, left top, left bottom, from(white), to(#E9E9E9));
    background:-webkit-linear-gradient(top, white, #E9E9E9);
    background:-moz-linear-gradient(top, white, #E9E9E9);
    background:-ms-linear-gradient(top, white, #E9E9E9);
    background:-o-linear-gradient(top, white, #E9E9E9);
    position:relative;
    border:1px solid #CCC5BB;
    border:1px solid rgba(0, 0, 0, 0.1);
    padding:20px;
    box-sizing:border-box;
    z-index:10;
}
.thumbnail-frame:before {
    display:block;
    content:" ";
    width:470px;
    height:470px;
    background:red;
    z-index:-1;
    position:absolute;
    top:0;
    left:0;
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
    border:1px solid #CCC5BB;
    border:1px solid rgba(0, 0, 0, 0.1);
}
.thumbnail-frame:hover .details {
    height:350px;
    padding-top:70px;
}
.thumbnail-frame > img {
    display:block;
}
.thumbnail-frame .details {
    position:absolute;
    top:20px;
    left:20px;
    text-align:center;
    background:black;
    background:rgba(0, 0, 0, 0.65);
    width:420px;
    height:100px;
    overflow:hidden;
    padding-top:10px;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -ms-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}
.thumbnail-frame .details small {
    font-family:'Georgia', serif;
    font-style:italic;
    color:#BEA087;
    font-size:0.9375em;
    display:inline-block;
}
.thumbnail-frame .details h3 {
    font-family:'Geared', slab-serif, sans-serif;
    color:white;
    font-size:1.5em;
    text-transform:uppercase;
    margin-top:5px;
}
.thumbnail-frame .details a {
    display:block;
    margin-top:50px;
    margin-bottom:50px;
}

I've seen a few people posting similar issues, but none of the proposed solutions were viable.

Many thanks

Answer 1

Remove this from the parent div

z-index: 10;

z-index on :before and :after will only work if the parent has no z-index