transform: scale clipping

Problem

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.

Problem courtesy of: Juan Rangel

Solution

Try with:

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

But this is not tested, you should create a jsfiddle so we can better help you.

Solution courtesy of: Nelson

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.