image拡大するホバー

Question

上

コード：https://jsfiddle.net/xakhLafd/

こんにちは、私は画像がホバーに拡大しやす遷移を使用していしようとしている

。それは動作しますが、時々バグアウトするようです。私はこれを次のように設定して修正しようとしました：

-webkit-transition-property: height,width; 

しかし、役に立たないです。また、私はこのコードの作成者（私はCSSブログのコードのいくつかを得ている）がこれをどのように達成しているかを理解しようとしています。私はホバリングで画像の幅がどのように変化するのか理解していますが、なぜ著者が上下の値が負になっているのか分かりません。私は、ホバー上で希望のサイズを得るために幅、高さ、上、左を編集しようとしていましたが、歪んでいるようです。恐らく、上と下の負の値が何をしているのかわからないからです。誰でもこの光を照らすことができますか？私は負のマージンに関するいくつかの記事を読んだが、ここで何が行われているのか分からない。ここで

はコードです：ここでは

<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/> 
.thumbnail{ 
    width: 100px; 
    height: 100px; 
} 
.thumbnail:hover { 
    position:relative; 
    top:-50px; 
    left:-35px; 
    width:500px; 
    height:auto; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 

Answer 1

CSSでtop:-50px; left:-35px;ルールは、それが拡大された後、そのまま画像の中央点を維持するために使用されます。それ以外の場合は、画像が拡大されると、右下側に移動したように感じられます。

幅と高さを変更するには、新しいレイアウトを計算し、アニメーションフレームごとにUIエレメントを再描画する必要があります。これは非常に高価です（再塗りとリフローの違いはSOです）。そういうわけで、あなたは「時にはバグアウトするようです」と感じているのです。

より良い方法はtransformです。問題を解決するjsfiddleを確認してください。新しいCSSコードは次のとおりです。

.thumbnail{ 
    width: 100px; 
    height: 100px; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 
.thumbnail:hover { 
    transform: scale(5); 
} 

Answer 2

は、問題を修正し、私が作成したフィドルです。私は相対的な位置を取り除き、100pxではなくautoに高さを設定します。

ここに私がしたコードです。

<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" 
class="thumbnail"/> 

.thumbnail{ 
    width: 100px; 
    height: auto; 
    position:relative; 
} 
.thumbnail:hover { 
    width:500px; 
    height:auto; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 

ここではフィドルを更新するのを忘れてしまいました。新しいリンクです。

https://jsfiddle.net/xakhLafd/1/