3

I am trying to use transform: scale for a grid of images here http://movies.themodern-nerd.com/genre. It works fine when scrolling from left to right, the image that is hover will stay on top of the others, but if you hover from right to left the hovered image is under the image on the right. 

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

Any help would be greatly appreciated.

4

1 回答 1

1

尝试：

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

但这未经测试，您应该创建一个 jsfiddle，以便我们更好地帮助您。

于 2012-10-28T06:06:55.180 回答