マウスオーバーで各サイトに画像のサイズを変更するにはどうすればよいですか？

Question

JavaScriptやCSSにイメージのサイズを変更してイメージが拡大するオプションがありますか？マウスオーバーで画像の中心が同じになるようにしますか？

Answer 1

画像を水平と垂直の中心に合わせる必要があります。これは、display: table-cell、text-align: center、およびvertical-align: middleの画像にラッパーdivを使用してから、:hoverの画像にいくつかの余分なスタイルを適用して行うことができます。

は、例えば、このフィドルを参照してください。むしろdisplay: table-cellを使用するよりもhttp://jsfiddle.net/jblasco/6qVnB/

必要に応じて、手動でホバー上の画像を再配置するために、いくつかの余白やposition: relativeとtopの組み合わせを見つけ出すことができます。このソリューションを使用して

例：スムーズな効果についてはhttp://jsfiddle.net/jblasco/fvqzR/2/

Answer 2

私は、これはイメージが徐々に成長し、まっすぐ進むhoverよりもはるかにエレガントな効果を与えることを可能にする、Modernizrと組み合わせCSS3 transitions and transformations (see the section "2. Animating your Transforms"を組み込むことをお勧めします。

私が使用するCSS3の効果が、JavaScriptでサポートされていなくても、あなたが探しているソリューションの範囲内に収まるようにしても、すべてのブラウザで一貫性を保つことができるよう、Modernizrを使用します。

私はこれがあなたを助けてくれることを願っています。