40種類以上のアニメーションを実装できるホバーエフェクト「imagehover.css」!

2016/04/05

こんにちは。
今回は40種類以上のアニメーションを実装できるホバーエフェクト「imagehover.css」!です。

CSSを読み込んで、クラスを追加するだけで40種類以上の様々なホバーアクションを実装できるスタイルシートを紹介します。

40種類以上のアニメーションを実装できるホバーエフェクト「imagehover.css」!

imagehover.css

imagehover-css

 

「imagehover.css」をダウンロードしてみよう!

https://github.com/ciar4n/imagehover.cssにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

「imagehover.css」を設置してみよう!

imagehover.min.cssをhead内に読み込みます。

 

html部分を記述します。
追加したいアニメーションのクラス名を記述します。

 

リンクを追加する場合は下記のように記述します。

 

背景色を指定したい場合は下記のように記述します。

 

CSSで背景色を指定したい場合は下記のように記述します。

 

現場のプロが教えるSEOの最新常識
現場のプロが教えるSEOの最新常識

 

いかがでしたか。ファイルも軽量で簡単に実装できますね。
以上で40種類以上のアニメーションを実装できるホバーエフェクト「imagehover.css」!でした。

topへ戻る