带有CSS的鼠标上方弹出图像的缩略图

我有一行缩略图（容器元素），设置为向左浮动； 缩略图被缩小以适合一行

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

.缩略图{
浮动：左；
位置：相对位置；
}
.缩略图{
/* ... */
宽度：65px；
高度：47px；
}

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

<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>

/*除了上述的*/
.th_选择器：悬停img{
位置：绝对位置；
顶部：-30px；
左：-30px；
宽度：150px；
高度：113px；
显示：块；
z指数：999；
}

一旦我将鼠标移到缩略图上，就会显示更大的图像（如预期的那样）。 但我有两个问题： 1） 其他缩略图向左跳一个位置。它们最终位于弹出图像的下方。这也会产生闪烁（取决于鼠标指针的位置）。 2） 如果窗口太小，并且有两行缩略图，则会出现断线（这不是很好）

如何在保持缩略图的原始位置的同时，创建一行具有漂亮悬停图像的缩略图

.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;
}

在代码示例中，不应使用position-absolute，因为此声明将从文档流中删除元素。这本质上意味着元素在页面上不再有“脚印”，因此右侧的缩略图实际上在现在绝对定位的元素下塌陷。

为了更好地理解，您可以在中创建一个示例吗。