Not signed in (Sign In)

Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.

General Support: album "stack" effect

Bottom of Page

1 to 4 of 4

  1.  
    • CommentAuthormacinchik
    • CommentTimeAug 7th 2006
     
    i was wondering if anyone knew a clever CSS method for drawing a stack of images underneath a thumbnail. I'm faking it with a graphic at:

    http://www.kdpublish.com/applications/ploggerdev_tags/?level=collection&id=2

    But as you can see it breaks for the images with the reverse aspect ratio.
    • CommentAuthorddejong
    • CommentTimeAug 7th 2006 edited
     
    Best I could concoct at 2am.

    You will need some extra markup to achieve the effect. I added two divs around the thumbnail img tag: thumb_1 and thumb_2. I'm not one for adding to the markup, but I don't see another way.

    Tested and works conceptually in IE 6 and FF 1.5, but neither wants to let the img escape the divs. Thoughts or suggestions?


    .photos {
    float:left;
    position:relative;
    top:-5px;
    left:5px;
    border:1px solid #000;
    background:#fff;
    }

    .thumb_1 {
    float:left;
    position:relative;
    top:-5px;
    left:5px;
    border:1px solid #000;
    background:#fff;
    }

    .thumb_2 {
    float:left;
    position:relative;
    top:-5px;
    left:5px;
    border:1px solid #000;
    background:#fff;
    }

    div.albumname {
    clear:both;
    }


    HTH,
    Derek
    • CommentAuthormacinchik
    • CommentTimeAug 8th 2006
     
    Thanks Derek, I appreciate your 2AM mindshare. :)

    I went ahead and created the effect via three separate images, with the two sides fixed and the middle an expanding background.
    • CommentAuthorddejong
    • CommentTimeAug 8th 2006
     
    Wow ... I would have never thought of that. To me, somehow, they were automatically layers. The thumbs do look very cool ... excellent execution and effect. ;)

    Cheers,
    Derek

1 to 4 of 4

  1.