如何使幻灯片显示在一起

Question

当我将鼠标悬停在左图像时，它将落后于第二张（右图）。

一旦我将鼠标悬停在第一张图像上，它应该在右图像的顶部滑动，反之亦然，在左侧图像上滑动。

到目前为止我所尝试的是Fiddle。

这是我的屏幕

我该怎么做？

.view-fifths:hover img {
   -webkit-transform: translateX(-300px);
   -moz-transform: translateX(-300px);
   -o-transform: translateX(-300px);
   -ms-transform: translateX(-300px);
   transform: translateX(-300px);
}

Answer 1

请添加以下css。我已移除overflow: hidden; css

中的.view

Fiddle

Css代码

    .view:hover {
     z-index:40;
    }
   .outer {
    overflow:hidden;
   }

Answer 2

在这种情况下，您需要一些棘手的代码：

如下：

.view-fifth:hover {
    z-index:1;
}

从视图类中删除overflow:hidden，始终在父div中添加overflow:hidden。

在此处，在外层

中添加overflow:hidden

请参阅工作小提琴Here