画像にマウスを合わせると、画像が少しズームアップされる方法をお伝えします。
この方法は、画像にマウスを合わせるだけで、その画像がズームアップされるため、動きのあるホームページになります。
たとえば、下記の画像にマウスを合わせると、画像が少しズームアップされますよね？
もちろん、画像がただズームアップされるだけであるため、あまり意味はないのですが、、、１つの技として、知っておいて損はないと思いますよ！
■ 画像にマウスを合わせると、画像がズームアップされる方法の手順
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが少し長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：画像を表示したい箇所に、下記のソースを入れる。
|
<div class="img-wide"><img src="gazou.jpg" width="300"></div>
|
上記のソースを使うときは、「画像のファイル名」を変更してください。
現在は、「gazou.jpg」にしていますけど、この画像のファイル名を、表示させたいファイル名に変更する、という形です。
【注意】
「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、
HTMLファイル（index.htmlファイルなど）と同じ場所に、画像を保存するようにしてください。
手順３：実際に画像にマウスを合わせて、確かめてみよう。
画像にマウスを合わせて、画像がズームアップされることを、確認してみてください。
画像がズームアップされたら、作業は完了です。
■ ちょっとしたカスタマイズ方法
CSSファイル（style.css）に入れる記述で、「transition: 0.3s;」を、たとえば「transition: 0.7s;」に変更すると、ズームアップされていく時間を長くすることができます。
これについては、お好みで試してみてくださいね。
あと、上記のソースでは、画像の横幅は「300」に指定しています。
そのため、画像サイズを変更する場合は、CSSファイル（style.css）に入れる記述の「width: 300px;」と、HTMLファイルに入れる記述の「width="300"」の数字部分を、それぞれ変更するようにしてください。
これについては、実際の表示を確認しながら、width の数字部分を変更していただくと、キレイにズームアップされますよ。
【よく読まれている関連記事】
