ホバーしたときにCSSだけで画像を切り替える方法

画像をホバーした際に、JavaScriptを使わずに純粋なCSSで画像を切り替える方法をご紹介します。

画像切り替えの基本

画像の切り替えは、通常の状態とホバーした状態の2つの画像を用意します。これらの画像をCSSの背景画像として指定し、ホバー時に背景画像を切り替えることで実現します。

CSSの基本設定

まず、以下のようにCSSの基本設定を行います。

.image-container {
  width: 200px;
  height: 150px;
  background-image: url('通常の画像のURL');
}

 

ホバー時の画像切り替え

次に、ホバーした際に画像を切り替えるCSSを追加します。

.image-container:hover {
  background-image: url('ホバーした状態の画像のURL');
}

 

画像切り替えの応用

これだけでも基本的な画像の切り替えは実現できますが、さらに応用を加えることも可能です。

トランジションの追加

ホバー時の画像切り替えをよりスムーズにするために、トランジションを追加します。

.image-container {
  /* 通常の設定 */
  transition: background-image 0.3s ease;
}

 

スプライト画像を使用する

複数の画像を1つの画像ファイルにまとめてスプライト画像として使用することで、サーバーへのリクエスト数を減らし、高速化できます。

.image-container {
  background-image: url('スプライト画像のURL');
  background-position: 0 0; /* 通常の画像の位置 */
}

.image-container:hover {
  background-position: 0 -150px; /* ホバーした状態の画像の位置 */
}

 

まとめ

CSSだけで画像をホバーしたときに切り替える方法を紹介しました。。追加の設定でアニメーションやスプライト画像の使用も可能なのでぜひ試してみてください。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...