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

如果您想保留当前的偏移量，可以使用以下内容:

变换:scale(2) 翻译(50px, 40px);