[CSS] マウスオーバーしたときに画像をふわっと切り替えたい

公開日:2023/10/17

サンプルコード

html

<div class="switch_image">
    <img src="normal.jpg">
    <img src="hover.jpg">
</div>

CSS

.switch_image {
    position: relative;
}

.switch_image img {
    transition: opacity 0.5s;
}
.switch_image:hover img:first-of-type {
    opacity: 0;
}
.switch_image img:last-of-type {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
}
.switch_image:hover img:last-of-type {
    opacity: 1;
}

マウスオーバー時に表示する二枚目の画像を「position: absolute;」で一枚目の画像と重なるように配置します。

二枚の画像は「opacity」で表示・非表示を切り替えます。「transition: opacity 0.5s;」でアニメーションをつけることで「ふわっと」画像が切り替わるようになります。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。