ホバーエフェクトで画像にコメントを表示する方法【コピペ可】

画像の上にマウスを合わせると、半透明のオーバーレイが表示されて、その中央にテキスト（コメント）が表示される方法をお伝えします。

具体的には、下記の画像にマウスを合わせてみてください。

画像のコメント

画像にマウスを合わせると、画像が暗くなって、テキストが表示されますよね。
このような方法（実現方法）をお伝えします。

なお、ここでは、５つのパターンをお伝えしますので、お好みで使ってみてくださいね。

【パターン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」にしていますけど、この画像のファイル名を、表示させたい画像のファイル名に変更するという形です。

【注意】

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

手順３：画像が表示されていることを確認する。

ホームページの表示を確認して、画像が表示されていることを確認します。

また、画像にマウスを合わせて、画像が半透明になり、テキストが表示されたら確認作業は完了です。

【パターン2】テキストが下から上に表示される方法

2つ目のパターンは、画像にマウスを合わせると、テキストが下から上にスライドして表示される方法です。

具体的には、下記の画像で確認してみてください。

画像のコメント

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

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

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

<div class="image-container2">
<img src="gazou.jpg" alt="">
<div class="overlay2">
<div class="overlay-text2">画像のコメント</div>
</div>
</div>

【注意】

手順３：画像が表示されていることを確認する。

【パターン3】テキストがズームアップして表示される方法

3つ目のパターンは、画像にマウスを合わせると、テキストがズームアップして表示される方法です。

具体的には、下記の画像で確認してみてください。

画像のコメント

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

.image-container3 {
    width: 500px;
    overflow: hidden;
    position: relative;
}

.image-container3 img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.overlay-text3 {
    font-size: 1.5em;
    line-height: 130%;
    text-align: center;
    color: #fff;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* 初期状態で縮小 */
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0; /* 初期状態では透明 */
}

.overlay3 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(0); /* 初期状態で縮小 */
    opacity: 0; /* 初期状態では透明 */
}

.image-container3:hover .overlay3 {
    transform: scale(1); /* ホバー時にズームイン */
    opacity: 1; /* ホバー時に表示 */
}

.image-container3:hover .overlay-text3 {
    transform: translate(-50%, -50%) scale(1); /* ホバー時にズームイン */
    opacity: 1; /* ホバー時に表示 */
}

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

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

<div class="image-container3">
<img src="gazou.jpg" alt="">
<div class="overlay3">
<div class="overlay-text3">画像のコメント</div>
</div>
</div>

【注意】

手順３：画像が表示されていることを確認する。

【パターン4】テキストがクルっと回転して表示される方法

4つ目のパターンは、画像にマウスを合わせると、テキストがクルっと回転して表示される方法です。

具体的には、下記の画像で確認してみてください。

画像のコメント

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

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

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

<div class="image-container4">
<img src="gazou.jpg" alt="">
<div class="overlay4">
<div class="overlay-text4">画像のコメント</div>
</div>
</div>

【注意】

手順３：画像が表示されていることを確認する。

【パターン5】テキストが左側に表示される方法

5つ目のパターンは、画像にマウスを合わせると、テキストが左側に表示される方法です。

具体的には、下記の画像で確認してみてください。

画像のコメント

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

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

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

<div class="image-container5">
<img src="gazou.jpg" alt="">
<div class="overlay5">
<div class="overlay-text5">画像のコメント</div>
</div>
</div>

【注意】

手順３：画像が表示されていることを確認する。

カスタマイズ方法

画像に表示するコメント（テキスト）は、HTMLファイルに貼り付けたソースの中で、「画像のコメント」の箇所を自由に変更することができます。

あと、画像の大きさ（横幅）を変更するには、CSSファイルに入れたソースの中で、「width: 500px;」の数字を変更することで、横幅を調整できますよ。

また、画像に表示されるコメント（テキスト）の文字の大きさは、「font-size: 1.5em;」の数字を変更することで、文字の大きさを変更できます。

これについては、表示を確認しながら、調整してみてくださいね。