画像を入れ替えるCSS

マウスオンで画像を入れ替える

CSSの設定

画像に高度な設定にクラス名 hover-image を設定する

.hover-image {
   width: 500px;
   height: 300px;
}

.hover-image img {
   width: 500px;
   height: 300px;
}

.hover-image:hover img {
   display: none;
}

.hover-image:hover {
      background-image: url("https://blog.beabo.net/wp-content/uploads/2025/06/hen-kaznelson-xFZwqsk03F0-unsplash-scaled.webp");
   background-repeat: no-repeat;
}

参考サイト

CSSだけでimgタグのsrcを差し替える方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

CSS側に画像URLを記述するので、ブロックエディタで使うには少し向かない感じがします。

CSSでhoverして画像を切り替える方法（回転・スライド・フェードなど） – じゅんぺいブログ