CSS Web制作

CSSでhoverして画像を切り替える方法(回転・スライド・フェードなど)

画像にカーソルを乗せたら画像を切り替えたいけどどうすればいいの?

画像にカーソルを載せて(マウスオーバー)画像を切り替える方法ですが、切り替え方は無数にあります。

今回は比較的シンプルな回転・スライド・フェードでの画像切り替え方法を解説していきます。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!

累計1080部突破!レビュー550件!

CSSでhoverして画像を切り替える方法

今回解説するのは以下になります。

  • X軸(縦)で回転して画像切り替え
  • Y軸(横)で回転して画像切り替え
  • 上からスライドして画像切り替え
  • 右からスライドして画像切り替え
  • 下からスライドして画像切り替え
  • 左からスライドして画像切り替え
  • フェードで画像切り替え
  • 上にフェードして画像切り替え
  • 右にフェードして画像切り替え
  • 下にフェードして画像切り替え
  • 左にフェードして画像切り替え

また共通のHTMLはこちらになります。

<div class="box">
  <img src="最初に表示される画像パス" alt="" />
  <img src="hoverで表示される画像パス" alt="" />
</div>

CSSは少しずつ違うので個別に載せますが、重要なコード以外は省略しているので全部のコードが見たい人はデモの左上にあるCSSをクリックして下さい。

あとは画像下に文字を入れていますが、それは画像切り替えとは無関係なので割愛します。

 

X軸(縦)で回転して画像切り替え

See the Pen
hoverで回転して画像切り替え(X軸)
by junpei (@junpei-sugiyama)
on CodePen.

CSSはこちらです。

/* 画像の親要素のスタイル */
.box {
  cursor: pointer;
  height: 200px;
  margin-inline: auto;
  margin-top: 20px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .7s;
  width: 200px;
}
/* 画像のスタイル */
.box img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: auto;
  left: 0;
  position: absolute;
  width: 100%;
}
/* 2枚目の画像は最初裏返し */
.box img:last-of-type {
  transform: rotateX( 180deg );
}
/* hoverすると2枚とも回転 */
.box:hover {
  transform: rotateX( 180deg );
}

重要なのはこちらです。

/* 画像の親要素のスタイル */
.box {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .7s;
}
/* 画像のスタイル */
.box img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  left: 0;
  position: absolute;
}
/* 2枚目の画像は最初裏返し */
.box img:last-of-type {
  transform: rotateX( 180deg );
}
/* hoverすると2枚とも回転 */
.box:hover {
  transform: rotateX( 180deg );
}

特に重要なのがtransform-style: preserve-3d;で、これは子要素を3Dにするという意味になります。

なのでtransform-style: preserve-3d;は3Dにする要素の親要素に書きます。

backface-visibility: hidden;裏面を非表示にするプロパティです。

あとはtransform: rotateX( 180deg );で2枚目は最初裏返しにして、hoverすると2枚とも回転するようにしています(つまり裏面が表になる)

transition: transform .7s;imgに書くと動かないので注意して下さい。

 

Y軸(横)で回転して画像切り替え

See the Pen
hoverで回転して画像切り替え
by junpei (@junpei-sugiyama)
on CodePen.

CSSはX軸とほぼ同じで、transform: rotateX( 180deg );transform: rotateY( 180deg );にするだけです。

 

上からスライドして画像切り替え

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

CSSはこちらです。

/* 画像の親要素のスタイル */
.box {
  cursor: pointer;
  height: 200px;
  margin-inline: auto;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
  width: 200px;
}
/* 画像のスタイル */
.box img {
  height: auto;
  left: 0;
  position: absolute;
  width: 100%;
}
/* 2枚目の画像は最初上に隠す */
.box img:last-of-type {
  top: -100%;
  transition: top .7s;
}
/* hoverすると2枚目の画像が下がる */
.box:hover img {
  top: 0;
}

重要なのはこちらです。

/* 画像の親要素のスタイル */
.box {
  overflow: hidden;
  position: relative;
}
/* 画像のスタイル */
.box img {
  left: 0;
  position: absolute;
}
/* 2枚目の画像は最初上に隠す */
.box img:last-of-type {
  top: -100%;
  transition: top .7s;
}
/* hoverすると2枚目の画像が下がる */
.box:hover img {
  top: 0;
}

2枚目の画像はtop: -100%;で上に100%移動して、親要素の.boxoverflow: hidden;で隠しています。

そしてhoverするとtop: -100%;top: 0;になって1枚目の上に表示されます。

 

右からスライドして画像切り替え

See the Pen
hoverで右からスライドして画像切り替え
by junpei (@junpei-sugiyama)
on CodePen.

CSSは上からスライドとほぼ同じで、topをleftにするだけですleft: -100%;にすると左からスライドになります)

/* 2枚目の画像は最初右に隠す */
.box img:last-of-type {
  left: 100%;
  transition: left .7s;
}
/* hoverすると2枚目の画像が右からスライドする */
.box:hover img {
  left: 0;
}

 

下からスライドして画像切り替え

See the Pen
hoverで下からスライドして画像切り替え
by junpei (@junpei-sugiyama)
on CodePen.

CSSは上からスライドとほぼ同じで、top: -100%;top: 100%;にするだけです。

/* 2枚目の画像は最初上に隠す */
.box img:last-of-type {
  top: 100%;
  transition: top .7s;
}
/* hoverすると2枚目の画像が下がる */
.box:hover img {
  top: 0;
}

 

左からスライドして画像切り替え

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

CSSは右からスライドとほぼ同じで、left: 100%;left: -100%;にするだけです

/* 2枚目の画像は最初左に隠す */
.box img:last-of-type {
  left: -100%;
  transition: left .7s;
}
/* hoverすると2枚目の画像が左からスライドする */
.box:hover img {
  left: 0;
}

 

フェードで画像切り替え

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

CSSはスライドとほぼ同じです。

.box {
  overflow: hidden; ← これは削除してOK
}
/* 2枚目の画像は最初透明 */
.box img:last-of-type {
  opacity: 0;
  transition: opacity .7s;
}
/* hoverすると2枚目の画像が透明じゃなくなる */
.box:hover img {
  opacity: 1;
}

スライド切り替えのtopleftなど上下左右ではなく、opacity: 0;で2枚目を最初は透明にしています。

そしてhoverしたらopacity: 1;で透明じゃなくしています。

あとは overflow: hidden;削除してOKです.boxの外に移動していないので)

 

上にフェードして画像切り替え

See the Pen
hoverで上からフェードして画像切り替え
by junpei (@junpei-sugiyama)
on CodePen.

今度はスライドみたいに2枚目の画像が重なるのではなく、逆に1枚目の画像がフェードで消えていくパターンになります。

CSSで重要なのはこちらです。

/* 1枚目の画像 */
.box img:first-of-type {
  top: 0;
  transition: top .7s, opacity .7s;
  z-index: 1;
}
/* hoverすると1枚目の画像が上にスライドする */
.box:hover img:first-of-type {
  top: -100%;
  opacity: 0;
}

これまでと違うのは、要素の指定がlast-of-typeからfirst-of-typeと1つ目の画像を指定しています。

もしHTMLで画像の順番を変えていればlast-of-typeのままでも大丈夫です(他に変えるコードがあるかも知れません)

これは1枚目の画像は最初普通に表示されていますが、hoverすると上に透明になりながらスライドしていきます。

つまりフェードしながら上に消えていきます。

あとz-index: 1;を書かないと2枚目の画像が上に表示されてしまうので気を付けましょう。

 

右にフェードして画像切り替え

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

CSSは先ほどとほぼ同じで、topをleftにするだけですleft: -100%;にすると左にスライドになります)

/* 1枚目の画像 */
.box img:first-of-type {
  left: 0;
  transition: left .7s, opacity .7s;
  z-index: 1;
}
/* hoverすると1枚目の画像が右にスライドする */
.box:hover img:first-of-type {
  left: 100%;
  opacity: 0;
}

 

下にフェードして画像切り替え

See the Pen
hoverで下にフェードして画像切り替え
by junpei (@junpei-sugiyama)
on CodePen.

CSSは上にスライドとほぼ同じで、top: -100%;top: 100%;にするだけです。

/* 1枚目の画像 */
.box img:first-of-type {
  top: 0;
  transition: left .7s, opacity .7s;
  z-index: 1;
}
/* hoverすると1枚目の画像が下にスライドする */
.box:hover img:first-of-type {
  top: 100%;
  opacity: 0;
}

 

左にフェードして画像切り替え

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

CSSは右にスライドとほぼ同じで、left: 100%;left: -100%;にするだけです。

/* 1枚目の画像 */
.box img:first-of-type {
  left: 0;
  transition: left .7s, opacity .7s;
  z-index: 1;
}
/* hoverすると1枚目の画像が左にスライドする */
.box:hover img:first-of-type {
  left: -100%;
  opacity: 0;
}

まとめ

今回はCSSでhoverしたら画像を切り替える方法を解説してきました。

HTMLでの画像を書く順番、要素の指定方法など、少し変わると動作しなかったり画像が下に隠れたりするのでご注意下さい。

以上になります。

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1060部以上販売し、レビューは520件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

-CSS, Web制作