Chrome中奇怪的CSS webkit-transform-scale悬停答案

【问题标题】：strange CSS webkit-transform-scale hover in ChromeChrome中奇怪的CSS webkit-transform-scale悬停
【发布时间】：2012-11-07 14:53:58
【问题描述】：

我对编码非常陌生，但在计算机方面经验丰富。在以下网站上，我正在创建一个悬停放大效果，仅用 css 编写。

链接：http://3514.linux3.testsider.dk/da/produkter/skumdetektorer 如果您在 Chrome 中查看第 1、4、5、6、7... 图像，它们在悬停时会出现严重的堆叠/层/优先级问题。

一周前所有浏览器都运行良好，但突然 Chrome 开始出现问题...

一开始我在所有浏览器上都遇到了同样的问题，但后来我通过搜索互联网解决了这个问题，发现 z-index 设置是“页面优先级”问题的答案。

我尝试在互联网的每个角落搜索与该主题相关的每个可能的词，但一无所获。

以下是现场使用的代码：

<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: 和 webkit-backface-visibility: 用于阻止 chrome 中的图像在悬停时闪烁。

z-index: 用于覆盖 pageholder-shadow 优先级（页面右侧为 998），以便图像在悬停时越过而不是下方。正如您在 Firefox 或任何其他浏览器中查看链接时看到的那样......

【问题讨论】：

恐怕这个链接并没有真正带来任何有价值的东西......它是一个必需的引脚，它不是一个有效的输入字段......除非你只输入 3514.linux3.testsider.dk 。 .. 在那里输入一个 pin 也可以访问3514.linux3.testsider.dk/da/produkter/skumdetektorer 吗？
妈的我忘了！密码是 5693！！登录地址为3514.linux3.testsider.dk，登录后按上述问题中的直接链接。谢谢>你！
刚刚跟进.. 进展如何？

标签： css hover scale css-transforms

【解决方案1】：

尝试将position:relative; 添加到您的.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;
}

【讨论】：

【解决方案2】：

我有类似的问题。我有图片库，我在悬停效果中使用了不透明度、变换和缩放效果。缩放后的每个图像都变得透明并在背景中显示其他图像我根据上述讨论修改了代码并将其粘贴在下面

.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;**

}

【讨论】：