画像にマウスを合わせると、画像が少しズームアップされる方法

画像にマウスを合わせると、画像が少しズームアップされる方法をお伝えします。

この方法は、画像にマウスを合わせるだけで、その画像がズームアップされるため、動きのあるホームページになります。

たとえば、下記の画像にマウスを合わせると、画像が少しズームアップされますよね？

もちろん、画像がただズームアップされるだけであるため、あまり意味はないのですが、、、１つの技として、知っておいて損はないと思いますよ！

■ 画像にマウスを合わせると、画像がズームアップされる方法の手順

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが少し長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：画像を表示したい箇所に、下記のソースを入れる。

上記のソースを使うときは、「画像のファイル名」を変更してください。

現在は、「gazou.jpg」にしていますけど、この画像のファイル名を、表示させたいファイル名に変更する、という形です。

【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、 HTMLファイル（index.htmlファイルなど）と同じ場所に、画像を保存するようにしてください。

手順３：実際に画像にマウスを合わせて、確かめてみよう。

画像にマウスを合わせて、画像がズームアップされることを、確認してみてください。画像がズームアップされたら、作業は完了です。

■ ちょっとしたカスタマイズ方法

CSSファイル（style.css）に入れる記述で、「transition: 0.3s;」を、たとえば「transition: 0.7s;」に変更すると、ズームアップされていく時間を長くすることができます。これについては、お好みで試してみてくださいね。

あと、上記のソースでは、画像の横幅は「300」に指定しています。

そのため、画像サイズを変更する場合は、CSSファイル（style.css）に入れる記述の「width: 300px;」と、HTMLファイルに入れる記述の「width="300"」の数字部分を、それぞれ変更するようにしてください。

これについては、実際の表示を確認しながら、width の数字部分を変更していただくと、キレイにズームアップされますよ。