画像にカーソルを載せて（マウスオーバー）画像を切り替える方法ですが、切り替え方は無数にあります。
今回は比較的シンプルな回転・スライド・フェードでの画像切り替え方法を解説していきます。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
5大無料特典2023年12月31日まで！
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での画像を書く順番、要素の指定方法など、少し変わると動作しなかったり画像が下に隠れたりするのでご注意下さい。
以上になります。
で画像を切り替える方法を解説。回転・スライド・フェードなど様々な方法と方向での切替方法をデモとコードを使って解説しています。){kind=link}