【CSS】画像の上をhoverしたらテキストが表示するようにする方法

今回は「画像の上をhoverしたらテキストが表示するようにする方法」について紹介したいと思います。

【CSS】画像の上をhoverしたらテキストが表示するようにする方法

完成形はこちら。

画像をhoverすると、テキストが表示されることが分かるでしょう。

HTML

<div class="item">

    <!-- hoverする画像 -->
    <div class="item__img">
        <img src="./image/IMG_0938.JPG" alt="">
    </div>

    <!-- 画像をhoverした時に表示させる要素 -->
    <div class="item__text">
        <p>画像をhoverしたら</p>
        <p>テキストが表示されます</p>
    </div>

</div>

親要素itemの中に、hoverさせる画像と画像をhoverした時に表示させる要素を用意します。

CSS

.item {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    &:hover .item__text {
        opacity: 1;
    }
    &__img {
        width: 100%;
        height: 100%;
    }
    &__text {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        color: #fff;
        background-color: rgba(0,0,0,0.6);
        transition: .3s ease-in-out;
        opacity: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        p {
            line-height: 1.8;
        }
    }
}

画像をhoverした時に表示させる「item__text」を通常はopacityを0にしておき、hoverしたらopacityを1にしてあげればOKですね。

これで画像をhoverしたらテキストが表示されます。

まとめ

以上が、画像の上をhoverしたらテキストが表示するようにする方法でした。

関連記事:

【JS】フェードインのアニメーションで要素を表示させる方法 CSSを使って自動でナンバリングする方法 【有益】大学生におすすめの本まとめ20選【2020年最新版】 【WEB制作】実務でよく使うCSSプロパティまとめ【2020】