轉換正在影響其他圖片

我已經用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

轉換正在影響其他圖片

回答

相關問題