css - CSS事件悬停可查看大图

我尝试使用引导程序和自定义CSS制作图片库。如果用户将鼠标悬停在图片上，则图片的位置会越来越大。一切仅通过使用css即可完成，但是我对图像的网格存在一些问题。当我将最右边的图像悬停时，位置将变得一团糟。这是我的实验：http://hanzoclothing.com/lookbook/chapter-iii

CSS：

.lookbook-item{
    position: relative !important;
}
.lookbook-item:hover{
    z-index: 5;
}
.lookbook-item .thumb{
    opacity: 1 !important;
}
.lookbook-item .thumb img{
    -webkit-transition: all 1s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.lookbook-item .thumb:hover img{
    position: absolute;
    min-width: 600px;
    max-width: 600px;
    margin-top: -40px;
    margin-left: -50px;
/*    top: 200%;
    left: 23%;*/
    z-index: 6;
}

最佳答案

我很想为此使用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);

关于css - CSS事件悬停可查看大图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25361447/