CSS animationが簡単に利用できるようになってから、シンプルながらも細かなところにこだわったホバーエフェクトが多く使われるようになった気がします。

今回は画像とテキストを組み合わせて、ホバー時に両方が異なる動きをするCSSを紹介します。
最終的に完成させるものはこちら。

See the Pen
CSS hover animation3 by awakia0309 (@nyantora_03_09)
on CodePen.

テキストを拡大させるホバーエフェクト

See the Pen
CSS hover animation2 by awakia0309 (@nyantora_03_09)
on CodePen.

CSS transitionを使うと、ホバー時の動きに滑らかな変化をつけられます。
CSSで装飾を行う際にはhタグやpタグなど、テキストを記述するタグにはテキストに関わるCSSのみを記述するようにします。今回はpタグを囲うdivタグにtransitionの値を設定し、ホバー時にtransformで文字サイズを大きくさせています。scaleの値は倍率を意味しますので、この場合は文字サイズを1.5倍拡大させています。

durationの数値設定を応用してホバー時のタイミングを調整

次にマウスオーバー時に画像を拡大させるエフェクトです。

See the Pen
CSS hover image by awakia0309 (@nyantora_03_09)
on CodePen.

こちらも画像の拡大にはtransitionとtransformを組み合わせています。
ポイントはtransformで拡大させる際に、親のタグでoverflowをhiddenで設定し画像が最初に表示された範囲からはみ出させないようにしレイアウトが崩れないよう防止します。
また、テキストのアニメーションとは微妙にタイミングをずらすため、transition-durationの値をテキストよりも遅く設定しています。durationの値は速度に関わるため、応用すればマウスをホバーさせた際の速度と、マウスが離れた際の速度を変えることができます。デモではホバー時の速度を早く、離れた際の速度は遅くなるよう調整しています。

テキストと画像を組み合わせて、二つの異なるタイミングでホバーエフェクトを作成

これらを応用して、画像の上にテキストを載せた状態でのホバーエフェクトを作成します。

See the Pen
CSS hover animation3 by awakia0309 (@nyantora_03_09)
on CodePen.

作例ではホバー時にテキストの位置もtransformで移動させ、よりテキストがはっきり見えるように背景の画像にはCSSのfilterでブラー（ぼかし）を加え、若干透明度も下げるように設定しています。

CSSのtransitionは細かな微調整が数値で設定できますので、使いこなせればホバーエフェクトだけでなくCSSのanimation全般に応用が可能です。

Share