ホバーで背景サイズを変えるCSS※IEにも対応

hoverアニメーションアイデアのひとつとして、「hoverすると領域自体の大きさは変わらずに背景画像が拡大 or 縮小アニメーションする」というのがあります。このブログにも採用している手法ですね。

background-sizeとtransitionの合わせ技でサクッと実装できるかと思いきや、実はIEではbackground-sizeのtransitionは効かない、という落とし穴があります。

またお前かーい

サポート終了間近のIEではありますが、相変わらず一定のシェアを保っていますし、そう手間がかからないのであれば対応してあげたいところ。ということで、IEにも対応した「background-sizeの変更アニメーション」を実装しました。

考え方

background-sizeにtransitionが効かない以上、background-size自体のアニメーションは諦める必要があります。
そこで代わりに、「backgroundを設定した要素を用意し、要素自体の大きさをアニメーションで変更する」という発想を用います。

overflow:hidden(領域からはみ出したものは非表示にする)を設定したdiv.outerの中に、background-imageを設定したdiv.innerを入れ、size変更アニメーションはdiv.innerそのものに対して設定します。

すると、div.outerの領域からはみ出した部分は表示されないため、はた目にはbackgroundのsizeがアニメーションで変わっているように見えるわけです。

div.innerのbackground-sizeはcoverとでもしておけば、要素やbackground用素材の縦横比が定まっていなくてもいい感じに隙間なく収まってくれます。

レスポンシブサイトや、画像サイズのレギュレーションが定まっていないケースでもばっちり対応

実装用コード

なるべくコピペで行けるように簡略化しました。

<div class="outer">
  <div class="inner" style="background-image: url(bg.jpg)"></div>
  <p>コンテンツ</p>
</div>

この手の演出を用いたい時は、大抵要素ごとに違う背景画像を用意していると思うので、background-imageだけhtml内にインラインで書いてしまいます。

また、コンテンツを入れる想定のp要素を、innerの「子要素」ではなく「兄弟要素」にしているところもミソです。これによって、ホバー時にdiv.innerが拡大縮小されても、コンテンツは影響を受けないようにしています。

次にCSS。

.outer {
  overflow: hidden;
  position: relative;
}

.outer .inner {
  width: 110%;
  height: 110%;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: .3s;
  transition: .3s;
}

.outer p {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.outer:hover .inner {
  width: 100%;
  height: 100%;
}

このコードでは、非hover時に少し拡大されている(110%)背景画像が、hoverすることによって100%に縮小されてぴったりフィットします。
お好みに応じて書き換えてください。

というわけで、cssはちょっと冗長になりますが、覚えてしまいさえすれば実装は簡単な「hoverで背景画像のサイズをアニメーションさせるコード」でした。
発端はIEに対応させるために模索したコードでしたが、上でも記述したように、レスポンシブサイトで要素の大きさが可変の場合や、画像の大きさにレギュレーションが存在しないケースなどでも活躍するので、覚えておいて損はないのではないでしょうか。

それでは、お互いハッピーweb制作体験を。