Thumbnails with pop-up image on mouseover with CSS - 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.