Question

我确定这是一个非常简单的但却无法找到我在其他地方寻找的具体答案。

基本上，我在响应式网格布局中设置了一系列并排图像。当您将鼠标悬停在每个图像上时，它会缩放并缩放图像，使其看起来像是朝向您。

然而，我遇到的问题是后面的图像总是与先前的图像重叠。我已经尝试将包含图像的所有div设置为相同的z-index但无效。

我已经设置了一个js.fiddle来演示这个问题。我希望用纯CSS解决。

JSfiddle link http://jsfiddle.net/Aloha_Design_Co/46poxw9j/

任何想法都会受到最高的赞赏。

谢谢，荒地

Answer 1

只需在z-index中提供更多.photo-content:hover。

.photo-content:hover {
    background-size: 120%;
    /* in conjuction with the transition below it zooms in on the background image - doesn't change box size in itself; */
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
    transform: scale(1.2);
    /* expands the box to look like it is 3D coming out of page */
    /*  Add z-index */
    z-index: 10;
}

Jsfiddle

重叠图像捕获下一个图像

1 个答案: