title: transform: scale clipping
body: <p>I am trying to use transform: scale for a grid of images here <a href="http://movies.themodern-nerd.com/genre" rel="nofollow">http://movies.themodern-nerd.com/genre</a>. 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. </p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated. </p>