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

2020-02-282020-09-24

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

1. 使用するケース
2. サンプル
3. 解説①横方向へのスライド
4. 解説②縦方向へのスライド

使用するケース

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

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

サンプル

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

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

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%);
    }