Thumbnails with pop-up image on mouseover with CSS

Question

I have a row of thumbnails (container elements) that are set to float left; The thumbnails are scaled down to fit in a row.

<style type="text/css">
    .thumbnails{
        float:left;
        position:relative;
    }
    .thumbnails img{
        /* ... */
        width:65px;
        height:47px;
    }
</style>

When the user hovers over a thumbnail, I would like to show a pop-up of the thumbnail with its original size:

<style type="text/css">
    /* in addition to the above... */
    .th_selector:hover img{

        position:absolute;
        top:-30px;
        left:-30px;

        width:150px;
        height:113px;

        display:block;
        z-index:999;
    }
</style>

Once I move the mouse over a thumbnail, the image bigger image is shown (as intended). But I have two problems: 1) The other thumbnails jump one position to the left. They end up below the pop-up image. This can also create a flicker (depending on the position of the mouse pointer). 2) If the window is too small and if there are two rows of thumbnails, there is a line-break (which is not very nice).

How could I create a row of thumbnails with a nice hover-image, while keeping the original position of the thumbnails?

Answer 1

.thumbnails {
    float:left;
    position:relative;
    width: 65px;
    margin-right: 10px;
}
.thumbnails img{
    position:relative;
    display:block;
    width:65px;
    height:47px;
}    
.thumbnails:hover img {
    top:-25px;
    left:-40px;
    width:150px;
    height:100px;
    z-index:999;
}

http://jsfiddle.net/functionfirst/V4YaQ/1/

In your code example, you shouldn't use position absolute as this declaration removes the element from the document flow. This essentially means the element no longer has a 'foot-print' on the page, hence thumbnails to the right are effectively collapsing in under the now absolutely positioned element.