转换正在影响其他图片

我已经用css创建了悬停转换图像。但是当我将鼠标悬停在第一张或第二张图像上时，其他图像像素瞬间发生变化。那是什么以及它的解决方案是什么？转换正在影响其他图片

我创造了这个DEMO从codepen

这是过渡的CSS我的图片：

.abo_im { 
    float:left; 
    width:170px; 
    height:150px; 
    overflow:hidden; 
    -webkit-transition: all .3s ; 
    -moz-transition: all .3s ; 
    -ms-transition: all .3s ; 
    -o-transition: all .3s ; 
    transition: all .3s ; 

} 
    .abo_im img { 
     width:100%; 
     -webkit-transition: -webkit-transform 0.5s ease; 
    -moz-transition: -moz-transform 0.5s ease; 
    } 
    .abo_im:hover img { 
     -webkit-transform:scale(1.25); /* Safari and Chrome */ 
     -moz-transform:scale(1.25); /* Firefox */ 
     -ms-transform:scale(1.25); /* IE 9 */ 
     -o-transform:scale(1.25); /* Opera */ 
     transform:scale(1.25); 
    }

来源

2014-09-30 innovation

看起来像一个JS的问题给我。 – 2014-09-30 14:06:57

@Paulie_D检查我的答案，'backface-visibility'将解决这个问题。还有什么让你觉得这是一个JS问题？（只是出于好奇） – Ruddy 2014-09-30 14:09:57

在img使用backface-visibility，这将解决它。

-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ 
backface-visibility: hidden;

Demo Here

来源

2014-09-30 14:07:01 Ruddy

这很好。但是，如果我使用'backface-visibility'，那么图像的所有像素值都会失真。 – innovation 2014-09-30 14:11:22

@innovation嗯，我认为这是你想要的效果！哈我现在会看一看。但那个形象之前是这样做的，不是吗？ – Ruddy 2014-09-30 14:13:22

是的。感谢您的回答。 – innovation 2014-09-30 14:16:00

只需添加-webkit-backface-visibility: hidden;您.abo_im img

.abo_im img { 
width: 100%; 
-webkit-transition: -webkit-transform 0.5s ease; 
-moz-transition: -moz-transform 0.5s ease; 
-webkit-backface-visibility: hidden; 
}

看到它here

来源

2014-09-30 14:08:38 undefinedtoken

转换正在影响其他图片

回答

相关问题