CSS事件悬停更大的图片

Question

我尝试使用bootstrap和我的自定义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;
}

Answer 1

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