CSS

画像にマウスオーバーで写真を切り替えるCSSの作り方

ここでは画像にマウスオーバーしたときに、画像が切り替わるスタイルシートの書き方について見ていきます。画像の切り替えは、いろいろやり方があるみたいですが、難しいことは嫌いなので、ここでは単純に同じサイズの2つの写真を用意して、それをimgタグとして切り替えするという方法についてご紹介します。

それでは早速、見ていきましょう。

下から画像が上がってくる切り替え

ボタンで表示を切り替えてご覧ください。

See the Pen
hover_switch-photo01
by kenichi (@ken81)
on CodePen.

HTML

<div class="box">
  <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo01.jpg" />
  <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo02.jpg" />
</div>

CSS

.box {
  position:relative;
  overflow:hidden;
  max-width: 250px;
  margin: 0 auto;
}
.box img{
  width: 100%;
  cursor: pointer;
}
.box img:last-child{
  position:absolute;
  top: 100%;
  transition: 0.3s;
}
.box:hover img:last-child{
  top:0;
}

これは、マウスオーバーすると、下から画像がニョキッと出てきて写真が入れ替わるというものです。仕組みとしては、下に2枚目の画像を待機させておいて、マウスオーバーしたときに位置を上に移動させます。

作り方としては、はじめにboxというクラス属性を入れたdiv要素を用意して、これを画像をはめ込むための枠としてサイズ指定しておきます。下に待機中の画像が見えないよう、この枠からはみ出ている要素を消すためのプロパティoverflow:hidden;を指定します。このあと、子要素となる2枚めの画像にposition:absolute;を指定したいので、起点となるこの親要素にはposition:relative;を指定します。

あとは、2枚目の画像を.box img:last-childという形でセレクタ指定して、position:absolute;で位置を絶対値にしたあと、top: 100%;で最初に作ったdiv要素の下に潜り込ませておきます。

最後に、.box:hover img:last-childというセレクタでマウスオーバーしたときに上にニョキッと出てくるように、ポジションをtop:0;に指定すれば完成です。

ニョキッという動きを実装するには、transition: 0.3s;というプロパティを使います。これは0.3秒かけてアニメーションさせるための指定になります。

これで下からニョキッと画像が切り替わる実装ができました。

上から画像が上がってくる切り替え

See the Pen
hover_switch-photo02
by kenichi (@ken81)
on CodePen.

HTML

<div class="box">
  <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo01.jpg" />
  <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo02.jpg" />
</div>

CSS

.box {
  position:relative;
  overflow:hidden;
  max-width: 250px;
  margin: 0 auto;
}
.box img{
  width: 100%;
  cursor: pointer;
}
.box img:last-child{
  position:absolute;
  top: -100%;
  transition: 0.3s;
}
.box:hover img:last-child{
  top:0;
}

今度は、上から画像がニョキッと出てくる仕組みです。これは最初の方法と基本的に同じ仕組みですが、ポジションをtop: -100%;からtop:0;に移動させるように変更しただけです。topbottomに変更した方が簡単そうでしたが、写真が少しずれてしまうので、このようにしました。

上下だけでなくleftrightで指定すれば、左から画像が出てくる切り替え、右から出てくる切り替えも実装できますね。

ふわっとフェードでの切り替え

See the Pen
hover_switch-photo03
by kenichi (@ken81)
on CodePen.

HTML

<div class="box">
  <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo05.jpg" />
  <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo06.jpg" />
</div>

CSS

.box {
  position:relative;
  overflow:hidden;
  max-width: 250px;
  margin: 0 auto;
}
.box img{
  width: 100%;
  cursor: pointer;
}
.box img:last-child{
  position:absolute;
  top: 0;
  transition: 0.5s;
  opacity: 0;
}
.box:hover img:last-child {
  opacity: 1;
}

画像をマウスオーバーすると、ふわっと画像が切り替わる仕組みです。これは切り替える画像をopacity: 0;で透明にしておいて、マウスオーバーでopacity: 1;にして表示させるという方法です。

よくありがちな間違いとして、display: none;で非表示にして、display: block;で表示という切り替え方法がありますが、これだとtransitionプロパティが効かないため、ふわっとなりませんのでご注意を。

タテに回転して切り替え

See the Pen
hover_switch-photo04
by kenichi (@ken81)
on CodePen.

HTML

<div class="box">
  <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo03.jpg" />
  <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo04.jpg" />
</div>

CSS

.box{
  width: 250px;
  height: 250px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: 1s;
}
.box img{
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}
.box:hover{
  transform: rotateX( 180deg );
}
.box img:last-child{
  transform: rotateX( 180deg );
}

これは画像を3次元的に回転させて、裏面に違う画像があるように見えるというものです。

作り方としては、最初に、全体をラップしているdiv要素に対してtransform-style: preserve-3d;を指定して、要素が3次元的に表現できるようにしておきます。そして、2つの画像を重ねて配置しておくのですが、img要素に対して、backface-visibility: hidden;という指定をします。これはimg要素が裏返ったときには非表示にするという設定です。

ここからがちょっと難しいというか、この仕組のポイントになるのですが、初期設定で切り替え用の2枚目の画像にはtransform: rotateX( 180deg );を指定して裏返しの状態にしておきます。先ほど、backface-visibility: hidden;で裏返った画像は非表示になるように指定してあるので、1枚目の画像の上に2枚目の画像が重なっているのですが見えなくなっています。

そして、マウスオーバーで要素全体がタテに回転すると、1枚目の画像が裏返って非表示になり、2枚目の画像は表向きになるため表示されるという仕組みです。ちょっと難しい仕組みになっていますが、理解してしまえばそこまで難しくないと思います。

ヨコに回転して切り替え

See the Pen
hover_switch-photo05
by kenichi (@ken81)
on CodePen.

HTML

<div class="box">
  <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo03.jpg" />
  <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo04.jpg" />
</div>

CSS

.box{
  width: 250px;
  height: 250px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: 1s;
}
.box img{
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}
.box:hover{
  transform: rotateY( 180deg );
}
.box img:last-child{
  transform: rotateY( 180deg );
}

これは、先ほどのタテの回転を単純にヨコにしただけです。transform: rotateX( 180deg );rotateXの部分が「X」だとタテ回転、「Y」だとヨコ回転になります。ちなみに180degは回転する角度です。

以上が、画像にマウスオーバーで写真を切り替えるCSSの作り方でした。

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP