strange CSS webkit-transform-scale hover in Chrome - css

Question

I'm very new to coding, but experienced on the computer.
On the following website I'm creating an enlarge-on-hover effect, written in css alone.
LINK: http://3514.linux3.testsider.dk/da/produkter/skumdetektorer
If you take a look in Chrome at the 1st, 4th, 5th, 6th, 7th... images, they have a serious stacking/layer/priotrity problem on hover.
Every browser worked fine one week ago, but suddenly Chrome started acting up...
I had the same problem with all browsers at first, but later on I fixed it by searching the internet and found that a z-index setting was the answer to the 'page-priority' problem.
I tried searching every corner of the internet, with every likely word related to the subject, but have found nothing.
Following is the code used on site:
<style type="text/css">
.hovergallery img {
-webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
-moz-transform:scale(1); /*Mozilla scale version*/
-o-transform:scale(1); /*Opera scale version*/
-webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
-moz-transition-duration:0.5s; /*Mozilla duration version*/
-o-transition-duration:0.5s; /*Opera duration version*/
opacity:1; /*initial opacity of images*/
-webkit-perspective:1000;
-webkit-backface-visibility:hidden;
}
.hovergallery img:hover {
-webkit-transform:scale(1.6); /*Webkit:Scale up image to 1.2x original size*/
-moz-transform:scale(1.6); /*Mozilla scale version*/
-o-transform:scale(1.6); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow:30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity:1; /*initial opacity of images*/
-webkit-perspective:1000;
-webkit-backface-visibility:hidden;
z-index:999;
}
</style>
webkit-perspective: and webkit-backface-visibility: are used to stop images in chrome from flickering on hover.
z-index: is used to overwrite pageholder-shadow priority (998 in right side of page), so that images goes over and not under it on hover. As you see when viewing the link in Firefox or any other browser...

Answer 1

Try and add position:relative; to your .hovergallery img
.hovergallery img {
-webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
-moz-transform:scale(1); /*Mozilla scale version*/
-o-transform:scale(1); /*Opera scale version*/
-webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
-moz-transition-duration:0.5s; /*Mozilla duration version*/
-o-transition-duration:0.5s; /*Opera duration version*/
opacity:1; /*initial opacity of images*/
-webkit-perspective:1000;
-webkit-backface-visibility:hidden;
position:relative;
}

Answer 2

I had similar problem. I have image gallary and I used opacity, transform and scale effect in hover effect. every image after scaling was becoming transparent and showing other images at background I modified the code based on above discussions and it is pasted below
.gallary{
text-align:center;
}
.gallary_img {
display:inline-block;
}
.gallary_img img{
border: 1px solid #660000;
display:inline-block;
opacity:0.4;
-webkit-transition: -webkit-transform 0.5s ease-in;
**position:relative;**
}
.gallary_img img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
border: 1px solid #660000;
-moz-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
**z-index:999;**
}