I have put together a simple Photo stack using CSS3 and JQuery. It works perfectly fine, but there is one major problem. The site needs to display out multiple stacks, an un-predictable amount due to the stacks being used to display a 'Photo gallery' on the website, and obviously the more galleries, the more stacks. 

Without the stacks this is simple, just echo out an tag with the src being retrieved from the DB. This is still simple when using the stacks as the only difference is a small piece of CSS and JQuery. 

Now for the problem, I have used Absolute positioning to allow the three images in the stack to be erm, stacked. This is fine, but now when the stacks are echoed out, it's stacking the stacks, Urgh! So all i'm ending up with is one huge stack of images rather than separate single stacks on three images a piece. 

Here is the code.

```
<html>
<head>

    <style type="text/css">

        #content {
            margin: 0 auto;
            width:  1024px;
        }

        #viewAlbumTitle {
            font-size: 20px;

        }

        #grid {

            line-height:          0;
            -webkit-column-count: 4;
            -webkit-column-gap:   10px;
            -moz-column-count:    4;
            -moz-column-gap:      10px;
            column-count:         4;
            column-gap:           10px;
        }

        #grid img {
            width:         100% !important;
            height:        auto !important;
            margin-bottom: 10px;
            padding:       5px;
            cursor:        pointer;
        }

        @media (max-width: 480px) {

            #grid {
                -moz-column-count:    2;
                -webkit-column-count: 2;
                column-count:         2;
            }
        }

        @media (max-width: 320px) {
            #grid {
                -moz-column-count:    1;
                -webkit-column-count: 1;
                column-count:         1;
            }
        }

        .pv-div {
            padding: 0 0 4px 0;
        }

        .pv-link {
            font-size:       15px;
            color:           #000;
            text-decoration: none;
        }

        .pv-link:hover {
            text-decoration: underline;
        }

        .thumb-over:hover {

        }

            /* image stsck */

        .image_stack {
            position: absolute;
        }

        .image_stack img {
            position:           absolute;
            border:             4px solid #FFF;
            box-shadow:         2px 2px 8px rgba(0, 0, 0, 0.5);
            -moz-box-shadow:    2px 2px 8px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
            z-index:            9999;
            -moz-transition:    all 0.2s ease;
            -webkit-transition: all 0.2s ease;
            -o-transition:      all 0.2s ease;
            transition:         all 0.2s ease;
        }

        .image_stack #photo1 {
            top:  8px;
            left: 108px;
        }

        .image_stack #photo2 {
            top:  6px;
            left: 104px;
        }

        .image_stack #photo3 {
            top:   4px;
            left:  100px;
            right: 100px;
        }

        .image_stack .rotate1 {
            -webkit-transform: rotate(15deg);
            -moz-transform:    rotate(15deg);
            transform:         rotate(15deg);
            -ms-transform:     rotate(15deg);
            -o-transform:      rotate(15deg);
        }

        .image_stack .rotate2 {
            -webkit-transform: rotate(0deg);
            -moz-transform:    rotate(0deg);
            transform:         rotate(0deg);
            -ms-transform:     rotate(0deg);
            -o-transform:      rotate(0deg);
        }

        .image_stack .rotate3 {
            -webkit-transform: rotate(-15deg);
            -moz-transform:    rotate(-15deg);
            transform:         rotate(-15deg);
            -ms-transform:     rotate(-15deg);
            -o-transform:      rotate(-15deg);
            cursor:            pointer;
        }

        .stack_wrap {
            margin-left: -100px;

        }

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $(".image_stack").delegate('img', 'mouseenter', function () {
                if ($(this).hasClass('stackphotos')) {//

                    var $parent = $(this).parent();
                    $parent.find('img#photo1').addClass('rotate1');
                    $parent.find('img#photo2').addClass('rotate2');
                    $parent.find('img#photo3').addClass('rotate3');
                    $parent.find('img#photo1').css("left", "150px");
                    $parent.find('img#photo3').css("left", "50px");

                }
            })
                .delegate('img', 'mouseleave', function () {
                    $('img#photo1').removeClass('rotate1');
                    $('img#photo2').removeClass('rotate2');
                    $('img#photo3').removeClass('rotate3');
                    $('img#photo1').css("left", "");
                    $('img#photo3').css("left", "");

                });
            ;
        });

    </script>

</head>
<body>

<!-- header -->
{include file="header.tpl"}
<!-- header end -->

<div id="content">

    <div style="margin:42px 0 0 -15px;">

        <div style="float:left; width:192px; padding:30px 24px 0 0;">
            <div>
                <span style="font-size:20px;">Username's photos</span>

                <div style="padding:10px 0 10px 0;"><img src="img/avatar.png" width="192"/></div>
                <div class="pv-div"><a class="pv-link" href="">Edit photo's</a></div>
                <div class="pv-div"><a class="pv-link" href="">Edit album</a></div>
                <div class="pv-div"><a class="pv-link" href="">Delete</a></div>
            </div>

        </div>

        <div style="float:left; border-left:1px solid #ebebeb; width:795px; min-height:400px; padding:32px 0 0 24px;">
            <!--<span>You currently have no pictures, why not upload some now?</span>-->

            <div>
                <span id="viewAlbumTitle">Username's photo albums</span>

                <div style="float:right"><a href="" class="main-button" onClick=('popUpload') style="margin:0;">upload
                    new pics</a></div>
            </div>

            <div style="margin:20px 0 0 0"></div>

            <div>

                <div style="margin:10px 0 0 0"></div>

                <div id="grid">

                    <div class="stack_wrap" style="float:left;">
                        <div class="image_stack" style="postion:relative;">
                            <img id="photo1" class="stackphotos" src="img/avatar.png">
                            <img id="photo2" class="stackphotos" src="img/avatar.png">
                            <img id="photo3" class="stackphotos" src="img/avatar.png">
                        </div>

                        <div class="image_stack" style="postion:relative;">
                            <img id="photo1" class="stackphotos" src="img/avatar.png">
                            <img id="photo2" class="stackphotos" src="img/avatar.png">
                            <img id="photo3" class="stackphotos" src="img/avatar.png">
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <div style="width:100%; padding:10px 0 20px 0;">

    </div>

</body>
</html>
​

```

If any one could help me out it will be very much appreciated. 

Thanks in advance.

Jamie