CSSだけで画像をマウスオーバーすると拡大する方法

画像をマウスオーバーすると画像が拡大するボタンをよく見かけます。

例題: FOX International Channels

左上の画像にマウスを当てると
ウォーキング・デッド

↓↓↓

拡大します。

ウォーキング・デッド

URLhttp://foxinternationalchannels.com/shows/the-walking-dead

やり方は色々ありますが今回は簡単にマウスオーバーすると画像が拡大する方法をご紹介いたします。

HTMLを設置します STEP1

画像のパスは自分の環境に合わせてください。

CSSを書く STEP2

まとめ STEP3

[サンプル] CSSだけで画像をマウスオーバーすると拡大する方法

サンプルのソースをコピーしても画像が絶対パスではないのでご自身の環境で画像を用意して画像を差し替えるだけで動きます。簡単に出来るので挑戦してみてください!

CSSだけで画像をマウスオーバーすると拡大する方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*