Question

我正在尝试使用transform：scale for image grid of http://movies.themodern-nerd.com/genre。当从左向右滚动时，它工作正常，悬停的图像将保持在其他图像的顶部，但如果您从右向左悬停，则悬停的图像位于右侧的图像下方。

.searchresults img {
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}

.searchresults img:hover {
-webkit-box-shadow: 0px 0px 3px 5px #d50000;
-moz-box-shadow: 0px 0px 3px 5px #d50000;
box-shadow: 0px 0px 3px 5px #d50000;
 -webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1); 
-o-transform: scale(1.1,1.1);
}

非常感谢任何帮助。

Answer 1

尝试：

.searchresults:hover {
   position: relative;
   z-index: 2;
}

但是这没有经过测试，你应该创建一个jsfiddle，这样我们可以更好地帮助你。

变换：缩放剪辑

1 个答案: