画像にカーソルを載せて（マウスオーバー）画像を切り替える方法ですが、切り替え方は無数にあります。
今回は、CSSだけを使った比較的シンプルな回転・スライド・フェードでの画像切り替え方法を、解説していきます。
（有料になっていたらすいません🙇♂️）
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%移動して、親要素の.boxのoverflow: 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;
}スライド切り替えのtopやleftなど上下左右ではなく、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での画像を書く順番、要素の指定方法など、少し変わると動作しなかったり画像が下に隠れたりするのでご注意下さい。
以上になります。
