画像のホバーエフェクト

サイトに手軽にアニメーションを導入できるのが、ホバーエフェクト。

アニメーションのあるサイトは、サイト訪問者を楽しませます。

また、モバイルでタップした際に、狭い画面でもタップしたことを明確に伝えるのもホバーエフェクトの魅力。

画像に対するいくつかのホバーエフェクトをご紹介します。

説明する画像は、全て以下の HTML を使います。

<figure class="img-wrap">
  <img class="img">
</figure>

また、以下の CSS も予め指定しています。

.img-wrap {
  display: block;
  margin: 0;
}

.img {
  box-sizing: border-box;
  height: auto;
  width: 100%;
}

画像のホバーエフェクトで最も多いのが、画像に色を付けるもの。

画像の親要素に背景色を指定し、画像をホバー時に透過させます。

.img-wrap {
  background: #e91e63;
}

.img {
  display: block;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  opacity: .54;
}

すると、ホバー時に画像がピンク色に。

サムネイル画像に display: block を指定しないと、背景色が常に見えてしまうため注意が必要です。

背景色をグラデーションにすれば、華やかになります。

.img-wrap {
  background: linear-gradient(to top, #c471f5, #fa71cd);
}

.img {
  display: block;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  opacity: .54;
}

グラデーションの配色は、WebGradients から選びました。

filter プロパティの使用でも、画像の色を変更できます。

例えばセピア色にしてみます。

.img {
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  filter: sepia(100%);
}

たったこれだけで、ホバー時に画像がセピア色に。

(100%) の値の変更で、セピアの度合いを調整できます。

次は白黒にしてみます。

.img {
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  filter: grayscale(100%);
}

ただし、IE は filter プロパティに対応していません（他のモダンブラウザは、ベンダープレフィックスなしで使用できます）。

filter プロパティでどのようなエフェクト関数が使えるかは、下記のページが非常に参考になります。

Photoshop はもういらない？明度も彩度も超手軽に変えられる CSS フィルターがスゴい

ホバー時に色を変えるエフェクトは、色の識別が難しい方には優しいエフェクトではありません。

そこで採用したいのが、大きさを変えるもの。

transform: scale を使えば、画像の大きさを変更できます。

.img {
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
  transform: scale(1.1);
}

画像が 1.1 倍大きくなります。box-shadow を指定するかはお好みで。

逆に小さくするのも、タップしたことが伝わりやすいエフェクトです。

.img {
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  transform: scale(.88);
}

背景色を指定して、小さくしてみます。

.img-wrap {
  background: linear-gradient(to top, rgba(196, 113, 245, .3), rgba(250, 113, 205, .3));
}

.img {
  display: block;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  transform: scale(.88);
}

transform:translateY を使用し、位置を動かすケースをよく見かけます。

.img {
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  transform: translateY(-24px);
}

画像が 24px 上に移動します。モバイル端末の小さな画面でも確認しやすいエフェクトです。

画像の周囲にボーダーを表示するケースも多くあります。

.img {
  border: 0 solid transparent;
  transition:.3s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  border: 40px solid #f48fb1;
}

背景色を付け、transform: scale で画像を小さくするエフェクトに似ています。

しかし、border だからできることもあります。

.img {
  border: 0 solid transparent;
  transition:.3s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  border-bottom: 40px solid #f48fb1;
  border-left: 40px solid #81d4fa;
  border-top: 40px solid #f48fb1;
  border-right: 40px solid #81d4fa;
}

上下左右の border を異なる値にすれば、背景色では表現が難しいホバーエフェクトにできます。

@keyframes の指定で、アニメーションを柔軟に表現できます。

先ほどの transform: scale と併用してみると…。

.img {
  transition: .4s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  animation: img-effect .5s cubic-bezier(.4, 0, .2, 1);
  transform: scale(1.1);
}

@keyframes img-effect {
  0% {
    transform: scale(1);
  }

  60% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1.1);
  }
}

0.5 秒の間に、画像が 1.2 倍まで大きくなった後で 1.1 倍の大きさに変わります。

今度は小さくするアニメーションに加え、背景色も指定してみます。

.img-wrap {
  background: linear-gradient(to top, rgba(196, 113, 245, .3), rgba(250, 113, 205, .3));
}

.img {
  display: block;
  transition: .4s cubic-bezier(.4, 0, .2, 1);
}

.img:hover {
  animation: img-effect .5s cubic-bezier(.4, 0, .2, 1);
  opacity: .54;
  transform: scale(.88);
}

@keyframes img-effect {
  0% {
    transform: scale(1);
  }

  70% {
    transform: scale(.8);
  }

  100% {
    transform: scale(.88);
  }
}

タップしたことを伝えるだけではなく、サイトに独自性が出ます。