マウスオーバーエフェクト

css

画像にマウスを乗せた時に、なんらかの変化を表現するマウスオーバーエフェクト。

インパクトもあり、エンドユーザーに印象をのこせますね。

よく使うのはボタン関連。ボタン以外にもアイデア次第で様々な箇所で利用できます。

種類もいろいろあります。僕がいいなと思うものをご紹介します。

Simple Tile Hover Effect

画像にマウスオーバーで、タイトルと説明文を表示できる。一番使用頻度が高いかな。

See the Pen
Simple Tile Hover Effect
by Chris Deacy (@chrisdothtml)
on CodePen.

3D hover plane effect

マウスを各要素が追随します(-_-;)。使い方によっては面白い。

See the Pen
3D hover plane effect
by Rian Ariona (@ariona)
on CodePen.

Direction-aware 3D hover effect (Concept)

マウスを動かした方向に、エフェクト発動!

See the Pen
Direction-aware 3D hover effect (Concept)
by Noel Delgado (@noeldelgado)
on CodePen.


News Cards – CSS only

マウスオーバーで説明文を表示。これも使えますね。

See the Pen
News Cards – CSS only
by Aleksandar Čugurović (@choogoor)
on CodePen.


Opening type

パカッと開くエフェクト。組み合わせると面白い。

See the Pen
Opening type
by Diego Pardo (@diegopardo)
on CodePen.


Button Hover

シンプルだけど、汎用性の高いエフェクト

See the Pen
Button Hover
by Katherine Kato (@kathykato)
on CodePen.

まだまだこの他にもたくさんエフェクトってありますね。

自分なりにカスタマイズして使用するのも面白いですね。

タイトルとURLをコピーしました