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

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

1 个答案: