おすすめグッズや役立つ情報ブログ

Sedori Plan

Web

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

投稿日:

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

例題: FOX International Channels

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

↓↓↓

拡大します。

ウォーキング・デッド

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

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

HTMLを設置します STEP1

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

CSSを書く STEP2

まとめ STEP3

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

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

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

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-Web

Copyright© Sedori Plan , 2018 All Rights Reserved.