css - ホバー後に画像が動く理由 - クロームのみ

Question

ホバー後の動画

クロームのみ！

Google Chrome ブラウザーで私のページを参照してください: http://qass.im/teeny/

今すぐすべての画像にカーソルを合わせます..

ホバー後に画像が動くのはなぜですか?

.pin img{
width: 100%;
max-width:100%;
height:auto;
border-radius:3px 3px 0 0;
display:block;
opacity:0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.pin img:hover{
 opacity:1;
 }

ありがとう。

Answer 1

画像のサイズ変更アルゴリズムが異なるため (私のマシンの画像の中心は Firefox では "移動" されますが、クロムではそうではありません) - 列 258x181px で使用する正確なサイズの画像を使用してみてください - その場合はそうではありませんブラウザでリサイズすると移動効果がなくなります。