ホバーで画像拡大

デモ

※ 当サイトのリセットCSSにはressを使用しています。

コピーする

div要素を１つ用意し、class="cca-hoverImage"を付与してください。
直下に任意の画像を配置してください。

サンプルHTMLを表示する

CSSコードの解説を見てみる

画像拡大時に画像が枠外に出ないよう、親要素にoverflow: hidden;を当てておきます。

ホバー時にアニメーションさせるため、transitionプロパティを設定します。
３つの値を指定しており、左からアニメーション対象プロパティtransform、アニメーション時間300ms、緩急ease-outです。

拡大にはtransformのscaleを使います。
本デモでは1.2倍にまで拡大させています。

機能に関するご質問は、このページの下部に表示されている Twitter のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM 等でご連絡ください。