html 鼠标放在图片上弹出,使用CSS在鼠标悬停上弹出图像的缩略图

我有一排设置为向左浮动的缩略图(容器元素);

缩小缩小以适合连续.

.thumbnails{

float:left;

position:relative;

}

.thumbnails img{

/* ... */

width:65px;

height:47px;

}

当用户将鼠标悬停在缩略图上时,我希望以原始大小显示缩略图的弹出窗口：

/* in addition to the above... */

.th_selector:hover img{

position:absolute;

top:-30px;

left:-30px;

width:150px;

height:113px;

display:block;

z-index:999;

}

将鼠标移到缩略图上后,将显示图像较大的图像(按预期).

但我有两个问题：

1)其他缩略图向左跳一个位置.它们最终低于弹出图像.这也可以创建一个闪烁(取决于鼠标指针的位置).

2)如果窗口太小而且有两行缩略图,则会有换行符(这不是很好).

我怎样才能创建一行带有漂亮悬停图像的缩略图,同时保持缩略图的原始位置？