CSS事件悬停以获得更大的图片

我尝试使用引导和自定义CSS创建图像库。我想做的是，如果用户将鼠标悬停在图片上，图片将在其位置上变大。一切都是通过使用css来完成的，但是关于我的图像的网格，我有一个小问题。当我将鼠标悬停在最右边的图像上时，位置会变得一团糟。这是我的实验：

CSS:

---

我很想使用

transform:scale（xxx）用于此。它将完全满足您的要求，而不会影响其他要素：

.lookbook-item .thumb:hover img {
    /* position: absolute; */
    /* min-width: 600px; */
    /* max-width: 600px; */
    /* margin-top: -40px; */
    /* margin-left: -50px; */
    z-index: 6;
    transform: scale(2);
}

如果要保留当前的偏移量，可以使用以下选项：

transform:scale（2）translate（50px，40px）

.lookbook-item .thumb:hover img {
    /* position: absolute; */
    /* min-width: 600px; */
    /* max-width: 600px; */
    /* margin-top: -40px; */
    /* margin-left: -50px; */
    z-index: 6;
    transform: scale(2);
}