Web

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

投稿日:

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

ページコンテンツ

例題: FOX International Channels

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

↓↓↓

拡大します。

ウォーキング・デッド

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

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

HTMLを設置します STEP1

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

CSSを書く STEP2

まとめ STEP3

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

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

スポンサーリンク
  • この記事を書いた人
  • 最新記事

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

© 2024 Sedori Plan