画像の CSS ホバーエフェクト

公開日 2017 年 12 月 31 日
更新日 2021 年 07 月 10 日

Akira Web デザイナー

Xでシェアする

HTML

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

説明する画像は、全て以下の 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: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.img:hover {
  opacity: 0.54;
}

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

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

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

.img {
  display: block;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.img:hover {
  opacity: 0.54;
}

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

フィルターをかける

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

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

 .img {
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

ホバー時に画像がセピア色になります。sepia(100%) の数値を変更すれば、セピアの度合いを調整できます。

次は白黒にしてみます。

 .img {
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

filter プロパティでどのようなエフェクト関数が使えるかは、Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴいが参考になります。

大きさを変える

ホバー時に色を変えるエフェクトは、色の識別が難しい方には優しいエフェクトではありません。そこで採用したいのが、大きさを変えるもの。

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

 .img {
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

 .img {
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

.img {
  display: block;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

位置を変更する

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

 .img {
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

画像が 24px 上に移動します。

ボーダーを付ける

ホバー時に画像の周囲にボーダーを表示してみます。

 .img {
  border: 0 solid transparent;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

 .img {
  border: 0 solid transparent;
  transition: 0.3s cubic-bezier(0.4, 0, 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 を使う

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

先ほどの transform: scale() と併用してみます。

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

.img:hover {
  animation: img-effect 0.5s cubic-bezier(0.4, 0, 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, 0.3),
    rgba(250, 113, 205, 0.3)
  );
}

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

.img:hover {
  animation: img-effect 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.54;
  transform: scale(0.88);
}

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

  70% {
    transform: scale(0.8);
  }

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

独特のエフェクトになります。