イメージホバー時に複数枚あることを伝えるCSSアニメーションサンプル

Tips

イメージホバー時に複数枚あることを伝えるCSSアニメーションサンプル

要望があってサンプルとしていくつか作ってみたのをシェアします。
パッと見は1枚のイメージなのですが、そこにホバーすると複数枚のイメージがあるように見せるアニメーションをCSSで実装したものです。
リンク先でイメージが複数枚あるとかクリックすると複数枚表示するイメージモーダル(ライトボックス)が開くのを伝えたいときに使えるかと思います。

共通のHTML・CSS

ここで紹介しているサンプルは基本的に下記のようなHTMLをベースに使用しています。
CSS次第ではあるので厳密にその順番である必要はないですが、img要素は1つ目で初期表示で表示させたいものを指定し、2つ目以降はホバー時に表示させたいものを指定していく想定になります。

HTML

<a href="#" class="images-preview">
  <img src="img01.jpg">
  <img src="img02.jpg">
  <img src="img03.jpg">
  <img src="img04.jpg">
</a>

CSSについては下記のようなスタイルをベースとして設定しており、ここへ紹介している各アニメーションの実装コードの追記や一部変更を加えれば、それぞれの動きを実装できます。
ここでは単純なCSSでの実装を紹介するので、z-indexや後述するコードの一部をそれぞれ指定する点で若干手間を感じますが、普段からSassを利用しているのであればその辺の指定に@forを用いれば指定も楽ですし、あとで調整するというときにも楽に対応できると思います。

CSS

.images-preview {
  position: relative;
  display: block;
}
.images-preview {
  position: relative;
  display: block;
}
.images-preview img {
  width: 100%;
  vertical-align: bottom;
  transition: .3s;
}
.images-preview img:not(:nth-child(1)) {
  position: absolute;
  top: 0;
  left: 0;
}
.images-preview img:nth-child(1) {
  position: relative;
  z-index: 4;
}
.images-preview img:nth-child(2) {
  z-index: 3;
}
.images-preview img:nth-child(3) {
  z-index: 2;
}
.images-preview img:nth-child(4) {
  z-index: 1;
}

実際の動き

各アニメーションの実際の動きは以下のデモ、または見辛い場合は直接CodePenで確認してみてください。

※動きはPCで確認してください。

イメージホバー時に複数枚あることを伝えるCSSアニメーションサンプル 目次

  1. 2枚目以降を回転させる
  2. 2枚目以降を右上にずらす
  3. 2枚目以降を上にずらす
  4. 2枚目以降をずらして左右に表示する
  5. 角度を変えながら2枚目以降をずらして表示する
  6. イメージを並べる

1. 2枚目以降を回転させる

2枚目以降を回転させる

4枚のイメージを重ねて配置することでホバー前は1枚目のみ見える形にし、transform: rotate()を使用してホバー時に2枚目以降へそれぞれ異なる回転を加えることで上記キャプチャのような見た目になります。
実装にはベーススタイルに下記CSSを追記します。

CSS

.images-preview:hover img:nth-child(2) {
  transform: rotate(-4deg);
}
.images-preview:hover img:nth-child(3) {
  transform: rotate(12deg);
}
.images-preview:hover img:nth-child(4) {
  transform: rotate(-12deg);
}

目次へ

2. 2枚目以降を右上にずらす

2枚目以降を右上にずらす

4枚のイメージを重ねて配置することでホバー前は1枚目のみ見える形にし、transform: translate()を使用してホバー時に2枚目以降の位置をそれぞれ右上にずらすことで上記キャプチャのような見た目になります。
実装にはベーススタイルに下記CSSを追記します。

CSS

.images-preview:hover img:nth-child(2) {
  transform: translate(15px, -15px);
}
.images-preview:hover img:nth-child(3) {
  transform: translate(30px, -30px);
}
.images-preview:hover img:nth-child(4) {
  transform: translate(45px, -45px);
}

目次へ

3. 2枚目以降を上にずらす

2枚目以降を上にずらす

同じくホバー時に2枚目以降の位置をずらすタイプですが、こちらはtransformtranslateY()で上に位置をずらし、さらにscale()を用いてサイズにも違いをつけることで上記キャプチャのような見た目にします。
実装にはベーススタイルに下記CSSを追記します。

CSS

.images-preview img:not(:nth-child(1)) {
  transform-origin: 50% 0;
}
.images-preview:hover img:nth-child(2) {
  transform: translateY(-15px) scale(.95);
}
.images-preview:hover img:nth-child(3) {
  transform: translateY(-30px) scale(.9);
}
.images-preview:hover img:nth-child(4) {
  transform: translateY(-45px) scale(.85);
}

目次へ

4. 2枚目以降をずらして左右に表示する

2枚目以降をずらして左右に表示する

ホバー時に2枚目以降の位置をずらして表示させる際、左右それぞれに表示させることで上記キャプチャのような見た目にしたものです。
スマートな書き方とは言えませんが、こちらの見栄えを実装する場合はHTMLを下記のように2枚目以降として表示するimg要素は2つずつ配置する形で記述します。

HTML

<a href="#" class="images-preview">
  <img src="img01.jpg">
  <img src="img02.jpg"><img src="img02.jpg">
  <img src="img03.jpg"><img src="img03.jpg">
  <img src="img04.jpg"><img src="img04.jpg">
</a>

CSSはベーススタイルでz-indexを指定していた箇所を下記でz-indexを指定している内容に差し替え、さらにホバー時のスタイルを追記していきます。
ホバー時のスタイルはtransformtranslateX()scale()を組み合わせて、それぞれのイメージの片方が1枚目の右側から、もう片方が左側から少し見えるように指定します。

CSS

.images-preview img:nth-child(2),
.images-preview img:nth-child(3) {
  z-index: 3;
}
.images-preview img:nth-child(4),
.images-preview img:nth-child(5) {
  z-index: 2;
}
.images-preview img:nth-child(6),
.images-preview img:nth-child(7) {
  z-index: 1;
}
.images-preview:hover img:nth-child(2) {
  transform: translateX(-30px) scale(.9);
}
.images-preview:hover img:nth-child(3) {
  transform: translateX(30px) scale(.9);
}
.images-preview:hover img:nth-child(4) {
  transform: translateX(-60px) scale(.8);
}
.images-preview:hover img:nth-child(5) {
  transform: translateX(60px) scale(.8);
}
.images-preview:hover img:nth-child(6) {
  transform: translateX(-90px) scale(.7);
}
.images-preview:hover img:nth-child(7) {
  transform: translateX(90px) scale(.7);
}

目次へ

5. 角度を変えながら2枚目以降をずらして表示する

角度を変えながら2枚目以降をずらして表示する

2. 2枚目以降を右上にずらす」に少し手を加えたもので、2枚目以降の位置をずらす動きに加えて角度も変更させることで上記キャプチャのような見た目になります。
こちらの場合は1枚目のイメージにも動きを加え、実装にはベーススタイルに下記CSSを追記します。

CSS

.images-preview:hover img:nth-child(1) {
  transform: rotate(5deg);
}
.images-preview:hover img:nth-child(2) {
  transform: translate(20px, -20px) rotate(9deg);
}
.images-preview:hover img:nth-child(3) {
  transform: translate(40px, -40px) rotate(13deg);
}
.images-preview:hover img:nth-child(4) {
  transform: translate(60px, -60px) rotate(17deg);
}

目次へ

6. イメージを並べる

イメージを並べる

これまで紹介してきたものはいずれも2枚目以降はホバー後も1枚目の下にあるような見た目でしたが、こちらは上記キャプチャのようにイメージを重ねずに見せるタイプです。
実装にはベーススタイルに下記CSSを追記し、transform-originでそれぞれのイメージの表示位置を指定し、transform: scale()でサイズを変更しています。

CSS

.images-preview img:nth-child(1) {
  transform-origin: 0 0;
}
.images-preview img:nth-child(2) {
  transform-origin: 100% 0;
}
.images-preview img:nth-child(3) {
  transform-origin: 0 100%;
}
.images-preview img:nth-child(4) {
  transform-origin: 100% 100%;
}
.images-preview:hover img {
  transform: scale(.49);
}

注意点として、イメージを重ねるタイプは:nth-childtransformの数値を多少いじりつつ追記しておくだけで枚数が増えたときへの対応も容易にでき、スタイルさえ用意しておけば基本的にimg要素の増減のみで見た目を調整することができますが、こちらは枚数によってスタイルを大きく変更する必要があり、さらに様々な枚数に対応させる場合は予め各枚数毎で異なるスタイルを複数用意したりclassで管理するなどの必要が出てきます。

目次へ


紹介してきたサンプルはいずれもシンプルな動きでしたが、もっと数値を大きくしたりそれぞれの違いをハッキリつけることで、ここでは紹介していないような面白い見せ方や格好良い見せ方もできると思います。
ホバー時の動きは基本的にtransformを用いており、translate()で位置、scale()でサイズ、rotate()で角度をそれぞれ調整できるので、もう少し自分好みにしたいという場合はこれらを踏まえて組み合わせ方や数値の指定をいろいろ試してみてください。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.