画像の上にマウスを合わせると、半透明のオーバーレイが表示されて、その中央にテキスト（コメント）が表示される方法をお伝えします。
具体的には、下記の画像にマウスを合わせてみてください。
画像にマウスを合わせると、画像が暗くなって、テキストが表示されますよね。
このような方法（実現方法）をお伝えします。
なお、ここでは、５つのパターンをお伝えしますので、お好みで使ってみてくださいね。
【パターン1】テキストが普通に表示される方法
1つ目のパターンは、画像にマウスを合わせると、テキストが普通に表示される方法です。
具体的には、下記の画像で確認してみてください。
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：画像を表示したい箇所に、下記のソースを入れる。
<div class="image-container1">
<img src="gazou.jpg" alt="">
<div class="overlay1">
<div class="overlay-text1">画像のコメント</div>
</div>
</div>
|
なお、上記のソースを使うときは、「画像のファイル名」を変更してください。
現在は、「gazou.jpg」にしていますけど、この画像のファイル名を、表示させたい画像のファイル名に変更するという形です。
手順３：画像が表示されていることを確認する。
ホームページの表示を確認して、画像が表示されていることを確認します。
また、画像にマウスを合わせて、画像が半透明になり、テキストが表示されたら確認作業は完了です。
【パターン2】テキストが下から上に表示される方法
2つ目のパターンは、画像にマウスを合わせると、テキストが下から上にスライドして表示される方法です。
具体的には、下記の画像で確認してみてください。
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：画像を表示したい箇所に、下記のソースを入れる。
<div class="image-container2">
<img src="gazou.jpg" alt="">
<div class="overlay2">
<div class="overlay-text2">画像のコメント</div>
</div>
</div>
|
なお、上記のソースを使うときは、「画像のファイル名」を変更してください。
現在は、「gazou.jpg」にしていますけど、この画像のファイル名を、表示させたい画像のファイル名に変更するという形です。
手順３：画像が表示されていることを確認する。
ホームページの表示を確認して、画像が表示されていることを確認します。
また、画像にマウスを合わせて、画像が半透明になり、テキストが表示されたら確認作業は完了です。
【パターン3】テキストがズームアップして表示される方法
3つ目のパターンは、画像にマウスを合わせると、テキストがズームアップして表示される方法です。
具体的には、下記の画像で確認してみてください。
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：画像を表示したい箇所に、下記のソースを入れる。
<div class="image-container3">
<img src="gazou.jpg" alt="">
<div class="overlay3">
<div class="overlay-text3">画像のコメント</div>
</div>
</div>
|
なお、上記のソースを使うときは、「画像のファイル名」を変更してください。
現在は、「gazou.jpg」にしていますけど、この画像のファイル名を、表示させたい画像のファイル名に変更するという形です。
手順３：画像が表示されていることを確認する。
ホームページの表示を確認して、画像が表示されていることを確認します。
また、画像にマウスを合わせて、画像が半透明になり、テキストが表示されたら確認作業は完了です。
【パターン4】テキストがクルっと回転して表示される方法
4つ目のパターンは、画像にマウスを合わせると、テキストがクルっと回転して表示される方法です。
具体的には、下記の画像で確認してみてください。
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：画像を表示したい箇所に、下記のソースを入れる。
<div class="image-container4">
<img src="gazou.jpg" alt="">
<div class="overlay4">
<div class="overlay-text4">画像のコメント</div>
</div>
</div>
|
なお、上記のソースを使うときは、「画像のファイル名」を変更してください。
現在は、「gazou.jpg」にしていますけど、この画像のファイル名を、表示させたい画像のファイル名に変更するという形です。
手順３：画像が表示されていることを確認する。
ホームページの表示を確認して、画像が表示されていることを確認します。
また、画像にマウスを合わせて、画像が半透明になり、テキストが表示されたら確認作業は完了です。
【パターン5】テキストが左側に表示される方法
5つ目のパターンは、画像にマウスを合わせると、テキストが左側に表示される方法です。
具体的には、下記の画像で確認してみてください。
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：画像を表示したい箇所に、下記のソースを入れる。
<div class="image-container5">
<img src="gazou.jpg" alt="">
<div class="overlay5">
<div class="overlay-text5">画像のコメント</div>
</div>
</div>
|
なお、上記のソースを使うときは、「画像のファイル名」を変更してください。
現在は、「gazou.jpg」にしていますけど、この画像のファイル名を、表示させたい画像のファイル名に変更するという形です。
手順３：画像が表示されていることを確認する。
ホームページの表示を確認して、画像が表示されていることを確認します。
また、画像にマウスを合わせて、画像が半透明になり、テキストが表示されたら確認作業は完了です。
カスタマイズ方法
画像に表示するコメント（テキスト）は、HTMLファイルに貼り付けたソースの中で、「画像のコメント」の箇所を自由に変更することができます。
あと、画像の大きさ（横幅）を変更するには、CSSファイルに入れたソースの中で、「width: 500px;」の数字を変更することで、横幅を調整できますよ。
また、画像に表示されるコメント（テキスト）の文字の大きさは、「font-size: 1.5em;」の数字を変更することで、文字の大きさを変更できます。
これについては、表示を確認しながら、調整してみてくださいね。
■ やり方が分からない場合は？
もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。
「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。
【よく読まれている関連記事】
