stacking thumbnails during/after a zoom effect

[toxkillfraex]

I'm not sure if this is the right place to ask this, but I guess I might as well ask a more css related issue.

either way we have a happy little dataview which is loading a load of images in a row (woot!)
that's all working nice and fine, but somewhere along the road somebody decided it might be cool to have a zoom effect on these images...

it looks bloody horrible. But I managed to get rid of the biggest issue after some fumbling around. <33
Well so far I've gotten it all to stack right half the time and bad the other half =O
However I'm worried that css will limit me to exactly this result D=

ze issue.png

so I was hoping somebody might have some ideas either whitin this framework or in css that actually achieve what we're trying to do here on mouse over.


the current code of functions involved:

zoomThumb : function (view, record, element, index, event) 
{
        element.firstElementChild.firstElementChild.style.zIndex = '800000';
        
        element.firstElementChild.firstElementChild.style.marginTop = '-43';
        element.firstElementChild.firstElementChild.style.marginLeft = '-43';
        element.firstElementChild.firstElementChild.style.marginBottom = '-43';
        element.firstElementChild.firstElementChild.style.marginRight = '-43';
        
        console.log(element.firstElementChild.firstElementChild.style.zIndex);
        Ext.create('Ext.fx.Anim', {
            target: element.firstElementChild.firstElementChild,
            duration: 1000,
            to: {
                width: 150, //end width 300
                height: 150, // end width 300
            }
        });
        
    },
    endZoomThumb : function (view, record, element, index, event) {
        element.firstElementChild.firstElementChild.style.zIndex = '1';
        
        element.firstElementChild.firstElementChild.style.marginTop = '0';
        element.firstElementChild.firstElementChild.style.marginLeft = '0';
        element.firstElementChild.firstElementChild.style.marginBottom = '0';
        element.firstElementChild.firstElementChild.style.marginRight = '0';
        
        Ext.create('Ext.fx.Anim', {
            target: element.firstElementChild.firstElementChild,
            duration: 1000,
            to: {
                width: 65, //end width 300
                height: 65 // end width 300
            }
        });
    }

The data view's TPL:

var tplThumbs = new Ext.XTemplate(
                                '<tpl for=".">',
                                    '<div class= "thumb-wrap" id="{id}">', 
                                    '<div class="thumb"><img src="{thumbnailUrl}" ></div>',
                                '</tpl>'
                            );

The panel involved has an id documentBrowser

The css involved

#documentBrowser .drawerView
{
    /*drawerview body*/
    
    margin: 10px
}

#documentBrowser .thumb-wrap
{    
    /*drawer thumbnail standard*/
    
    margin: 4px;
    margin-right: 0;
    
    padding: 5px;    

    float: left;
    
    width: 70;
    height: 70;
    
}

#documentBrowser .thumb
{
    position: static;
    
    z-index: -2;
}

#documentBrowser .thumb img
{
    /*drawer thumbnail image size*/
    
    position: static;
    
    width: 65;
    height: 65;
    
    z-index: inherit;
}

#documentBrowser .x-item-over
{   
    /*drawer thumbnail on mouse over*/
    
    padding: 4px;

    border-radius: 5px;
    
    background: $thumb-mouse-over-background;
    
    border:1px solid $thumb-mouse-over-border-color;
    
}

[toxkillfraex]

I managed to fix it!

#documentBrowser .thumb img
{
    /*drawer thumbnail image size*/
    
    position: relative;
    
    width: 65;
    height: 65;
    
    z-index: inherit;
}