css - 变换:缩放裁剪

Question

我正在尝试使用 transform: scale 图像网格 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 以便我们更好地帮助您。