CSSで作るカッコいいマウスオーバーエフェクト(透過)を作ってみた(サンプル付き)

カッコいいマウスオーバーエフェクトを作ってみた(サンプル付き)

LIGのWebサイトが先日リニューアルされてましたね。
今回ページトップへ戻るボタンを押してもリニューアル前のダイナミックに戻るエフェクトがなくなったのは寂しいです。

【祝】コーポレートサイトをリニューアルしました。- 2014年10月 -

URL【祝】コーポレートサイトをリニューアルしました。- 2014年10月 –

いろんな仕掛けがあってブログ以外にも楽しみなギミックあります。

photo credit: Camdiluv ♥ via photopin cc

LIGのフッター近くのバナー

ページの下部にある実績のバナーにマウスオーバーをしてみるとカッコいいマウスオーバーエフェクトが見ることができます。

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

マウスオーバーすると

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

画像が半透明の黒になり、文字が上下から出てきて真ん中に線が出ます。
今回このマウスオーバーに近いものを作ってみます

HTMLを書きます STEP1

画像とテキスト部分を分けています。

CSSを書きます STEP2

これだけでは動きません。
このCSSは、画像とテキスト箇所の基本設定です。
bannerを基点として絶対配置でおいています。

マウスオーバーのCSS書きます STEP3

transitionを使って黒にする時間を調整します。

マウスオーバーしたときのopacity(不透明度)の数値を1にするとマウスオーバーしたときに真っ黒な状態になります。数値を1以下にして背景の画像が見えるように調整してください。

ここまでの設定でマウスオーバーすると

マウスオーバー

このようになります。

マウスオーバー

これだけでも十分ですが、マウスオーバーしたときにテキストを動かして表示させてみます。

[サンプル] マウスオーバーエフェクト ver.1

テキストを動かすCSS書きます STEP4

transform: translateY(-100px) これは見出しの最初の位置をY方向に-100pxのところにしています。

そしてマウスオーバーの設定ところでtransform: translateY(0px) 0pxにしてあるので-100px→0pxへ移動して表示されます。

transitionで細かな値を設定します。

同様にテキスト箇所にも同じ設定をします。
テキストの箇所は下から表示させたいので
transform: translateY(100px) Y方向100pxのところに設定してマウスオーバーで 0pxのところへ移動する設定をしてあります。

まとめ

[サンプル] マウスオーバーエフェクト ver.2

※完成形のテキストの位置を少し変えています。

画像マウスオーバーの透過は簡単に出来ます。
しかし最近はテキストが動いて表示される仕組みも良く見られます。

カッコいいマウスオーバーエフェクトも作れるようにしてスキルを上げましょう!

カッコいいマウスオーバーエフェクトを作ってみた(サンプル付き)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*