画像のホバーとは

画像のホバーとは、画像にマウスが重なった状態を指します。

ユーザーに対し、現在どこにマウスがあるのかを分かりやすく伝えることが重要です。

注意点

ただ表示しているだけの画像にアニメーションが設定されていると、ユーザーはクリック出来るのかな？と感じます。そういったユーザーの思考と実際の動きが違う場合、ユーザーに不快感を与えてしまう可能性があるため、不要なアニメーションは実装しないようにしましょう。

スマートフォン、タブレットの場合、タップした一瞬がホバー状態となるため、アニメーションが終了する前にページが切り替わってしまうことがあります。なので、複雑なアニメーション設定せず、シンプルで変化が分かりやすいアニメーションにしましょう。

画像の拡大

画像にマウスが重なると、画像が大きくなるアニメーションです。

シンプルですが、よく見かける手法ですので、ぜひ試してみてください。

HTML

<div>
  <img src="画像のパス" alt="">
</div>

CSS

/* 画像を囲む枠 */
div{
  /* 横幅 */
  width: 200px;
  /* 高さ */
  height: 150px;
  /* 枠からはみ出した部分をカット */
  overflow: hidden;
}

img{
  /* 横幅を100%にすることによって画像を囲む枠（div）と同じサイズになる */
  width: 100%;
  /* 画像の拡大率を1（等倍）に設定 */
  transform: scale(1);
  /* 拡大させる時の始点を設定 */
  /* 「left top」で左上を始点に設定 */
  /* 「left bottom」で左下を始点に設定 */
  /* 「right top」で右上を始点に設定 */
  /* 「right bottom」で左上を始点に設定 */
  /* 「center」で中心部を始点に設定 */
  transform-origin: center;
  /* アニメーションの時間を1秒に設定 */
  transition: transform 1s;
}

/* 画像をマウスオーバー（hover）した場合 */
img:hover{
  /* 画像の拡大率を1.3倍に設定 */
  transform: scale(1.3);
}

実装

See the Pen image-hover1 by DREAM NET WORKS (@dnw) on CodePen.

注意点

画像単体だけで拡大させると他の要素にまで影響してしまいます（実装：左）。今回はdivタグで画像を囲み、divタグよりも大きくなった部分は表示しないよう、divタグに「overflow: hidden;」を設定しています。