0

ホバーしたときに画像を拡大する効果を使用する html/css サイトがあります。問題なく動作しますが、Chrome を使用すると、ページの読み込み時に画像が揺れたりサイズが変更されたりします。これは他のブラウザーでは行われないようで、Dreamweaver ブラウザー テストでも行われません。効果を削除すると、ページは正常に読み込まれます。これを引き起こす可能性のあるアイデアはありますか？

ページへのリンクは次のとおりです: http://carissalyn.com/Landing.html

画像の html は次のとおりです。

<tr>
<td><a href="" class="imghover"><img src="images/leaf.jpg" alt="portrait" class="border"></a></td>
<td><a href="" class="imghover"><img src="images/DSC_2280-Edit-Edit-Final.jpg"  alt="portrait" class="border"></a></td>
<td><a href="" class="imghover"><img src="images/DSC_2685.jpg" alt="blog" class="border"></a></td>
</tr>

ホバーのCSSは次のとおりです。

.imghover img{
-webkit-transition-duration: 1s; 
-moz-transition-duration: 1s; 
-o-transition-duration: 1s; 
}
.imghover img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1); 
-o-transform:scale(1.1); 
}
4

1 に答える 1

0

私は同様の問題を抱えていました。このサイトで修正を見つけました。ちょっとハックですが、うまくいくようです。重要なのは、ズームとともに回転を少し追加することです。

.imghover img:hover {
    transform: scale(2) rotate(0.1deg);
}
于 2013-04-09T22:56:46.460 に答える