【HTML&CSS】マウスオーバーでスライドして画像切り替えを行う方法を丁寧に解説

2020-04-08

今回は、Webサイトの中の画像をマウスオーバーすると、その画像がスライドして別の画像に切り替わる方法について、説明していきます。

「自撮り画像を切り替える女の子」

使用するケース

画像がリンク元となっているケースが一般的です。

画像がスライドして切り替わることで閲覧者の注目を引き、クリックを訴求することができます。

サンプル

こちらからご確認ください。

解説①横方向へのスライド

HTMLは下記のように記述します。

<a href="#" class="img-disp">
  <div class="img-wrap">
    <img src="img1.jpg" alt="">
    <img src="img2.jpg" alt="">
  </div>
</a>

一般的にリンクに対して使われるので、「a」タグで表示領域をマークアップします。ここでは「img-disp」というクラスを付けています。

「img-disp」の中に、画像を並べた箱として「div」要素を設置します。ここでは「img-wrap」というクラスを付けています。

「img-wrap」の中に、切り替え前の画像「img1.jpg」、切り替え後の画像「img2.png」をそれぞれ指定します。

cssは下記のように指定します。

.img-disp {
  display: block;
  margin: 0 auto;
  width: 300px;
  overflow: hidden;
}

.img-wrap {
  width: 200%;
  height: 100%;
  transition: 1s;
  display: flex;
}

.img-wrap img {
  display: block;
  width: 50%;
}

.img-disp:hover .img-wrap {
  transform: translateX(-50%);
}

「.img-disp」について

もともと「a」タグなので「display:block」を指定しインライン要素からブロック要素に変更しています。

width」で表示したいサイズの横幅を指定します。

注目すべきは「overflow:hidden」の記述です。
画像を並べた箱 「img-wrap」は「img-disp」をはみ出すように設定するので、この指定をしないと初期状態で画像が2つ並んでしまいます。
そのため「over-flow:hidden」を記述し、表示領域を超えた分は非表示にするという内容になります。

「.img-wrap」について

width:200%」により、「img-disp」の2倍の横幅を設けます。

transition:1s」を設定し、スライドアニメーションの実行時間を1秒に設定しています。任意のスピードに変更して問題ありません。

display:flex」を設定することで、画像2つを横に並べます。
(もともと「img」はインライン要素であるためflexboxを使用しなくても横に並びますが、不必要な空白を除去するために「img」に「display:block」を入れてブロック要素に置き換えます。そのために、ブロック要素を横に並べる「flex」の記述が必要になります。)

「.img-wrap img」について

前述の通り「display:block」を入れて不自然な空白を除去しています。

また「width:50%」を記述し、横幅を「img-wrap」の半分の値にします。
「img-wrap」 は 表示領域「img-disp」 の2倍の横幅を設定しているため、この記述により、表示させたい画像と、表示領域「img-disp」の横幅を等しくすることができます。

「.img-disp:hover .img-wrap」について

表示領域「img-disp」がマウスオーバーされた際の「img-wrap」のスタイルとなります。

transform: translateX(-50%)」を設定し、 「img-wrap」の横幅50%(=画像1つ分)の長さだけ左にずれるようにします。
これにより、初期表示画像が左にずれて表示されなくなり新しい画像が表示されます。

横方向へのスライドは、これで完成です!

解説②縦方向へのスライド

HTMLは下記のように設定しています。

<a href="#" class="img-disp2">
  <div class="img-wrap2">
    <img src="img1.jpg" alt="">
    <img src="img2.jpg" alt="">
  </div>
</a>

横方向と内容は変更ありませんが、区別して「img-disp」「img-warp」に「2」の数字を付けています。

CSSは下記となります。
横方向と多くの箇所が異なります。

.img-disp2 {
      display: block;
      margin: 0 auto;
      width: 300px;
      height: 199.875px;
      overflow: hidden;
    }

.img-wrap2 {
      width: 100%;
      transition: 1s;
    }

.img-wrap2 img {
      display: block;
      width: 100%;
    }

.img-disp2:hover .img-wrap2 {
      transform: translateY(-50%);
    }

「.img-disp2」について

横方向のスライド同様に「display: block」「width」「overflow: hidden」を記述していますが、縦方向では「height」も記述しています。

横方向のスライドでは画像が横に並び、必然的に画像の縦のサイズがそのまま「img-disp」の縦のサイズになっていましたが、縦方向のスライドでは画像を縦に並べるため、2枚目の画像を非表示にするために「img-disp2」の縦幅を表示される画像の高さ分だけ、あらかじめ設定する必要があります。

「.img-wrap2」について

画像を横に並べないため、「width」は「100%」を設定して「img-disp2」と同じサイズにします。

また、横方向へのスライド同様、スライドアニメーション時間を「transition: 1s」で設定しています。

「.img-wrap2 img」について

display: block」で画像をブロック要素に指定しています。

また、「width: 100%」を記述し「img-wrap2」と同じ横幅を指定します。

「.img-disp2:hover .img-wrap2」について

transform: translateY(-50%)」を指定し、画像がマウスオーバーされた際に「img-wrap2」が縦方向へ高さの50%(=画像1枚分)だけ上に移動するよう設定します。

これで縦方向へのスライドも完成となります。