画像に動き(ホバーエフェクト)を付けるCSSライブラリが簡単すぎる！

こんにちは、飲食店さんの集客サポーターことざんぷです。ついに...ドナルド・トランプ氏にアメリカ大統領が決まってしまいましたね。専門家じゃないので、この先の経済がどうとかそういう言及はできないのですが、ただならぬ不安感があるのは確かです。日経平均も今日だけで1000円も値を下げてますし、今後どうなっていくのでしょうかね。私自身、もっと勉強しなければ。

さて今回は、画像に動き（ホバーエフェクト）をつけたい、という要望を叶える、CSSライブラリ「imagehover.css」のご紹介です！前々回の記事にて使い方をご紹介したのですが、今回は実際のサンプルをふんだんご紹介していく内容です。気に入ったものがあれば、ぜひご自身のサイトに取り入れてみてくださいね^^それでは参ります。

 

画像に動きをつけるCSSライブラリ

今回ご紹介するのは、

画像にマウスカーソルを乗せた際に

アニメーションのような動く効果を

簡単につけることができる

CSSのサンプルが集まったファイルです。

「ライブラリ」なんて呼ばれ方もしますね。

 

設定の方法は、昨日の記事を

参照していただければと思います。

 

imagehover.cssのサンプル一覧

というわけで、

素晴らしく簡単に 実装できる

imagehover.cssのデモ一覧です。

 

公式サイトに載っている

全44種類を掲載しますので、

お時間ありましたら見ていって下さい♪

 

画像は良さそうなのが思いつかなかったので、

僕のアイコン画像にしましたｗ

特に意味はないので気になさらずm(_ _)m

 

シンプルなフェード系

 

【DEMO1】imghvr-fade

 

 

ギュインっとpush系

 

【DEMO2】imghvr-push-up

 

 

【DEMO3】imghvr-push-down

 

 

【DEMO4】imghvr-push-left

 

 

【DEMO5】imghvr-push-right

 

 

ぬるっとなめらかslide系

 

【DEMO6】imghvr-slide-up

 

 

【DEMO7】imghvr-slide-down

 

 

【DEMO8】imghvr-slide-left

 

 

【DEMO9】imghvr-slide-right

 

 

ふわっスンっと現れるreveal系

 

【DEMO10】imghvr-reveal-up

 

 

【DEMO11】imghvr-reveal-down

 

 

【DEMO12】imghvr-reveal-left

 

 

【DEMO13】imghvr-reveal-right

 

 

パコッと開くhinge系

 

【DEMO14】imghvr-hinge-up

 

 

【DEMO15】imghvr-hinge-down

 

 

【DEMO16】imghvr-hinge-left

 

 

【DEMO17】imghvr-hinge-right

 

 

くるりと回転flip系

 

【DEMO18】imghvr-flip-horiz

 

 

【DEMO19】imghvr-flip-vert

 

 

【DEMO20】imghvr-flip-diag-1

 

 

【DEMO21】imghvr-flip-diag-2

 

 

ウイーンと開くshutter系

 

【DEMO22】imghvr-shutter-out-horiz

 

 

【DEMO23】imghvr-shutter-out-vert

 

 

【DEMO24】imghvr-shutter-out-diag-1

 

 

【DEMO25】imghvr-shutter-out-diag-2

 

 

【DEMO26】imghvr-shutter-in-horiz

 

 

【DEMO27】imghvr-shutter-in-vert

 

 

【DEMO28】imghvr-shutter-in-out-horiz

 

 

【DEMO29】imghvr-shutter-in-out-vert

 

 

【DEMO30】imghvr-shutter-in-out-diag-1

 

 

【DEMO31】imghvr-shutter-in-out-diag-2

 

 

ギュイーンがしゃっとfold系

 

【DEMO32】imghvr-fold-up

 

 

【DEMO33】imghvr-fold-down

 

 

【DEMO34】imghvr-fold-left

 

 

【DEMO35】imghvr-fold-right

 

 

ズズズーンとzoom系

 

【DEMO36】imghvr-zoom-in

 

 

【DEMO37】imghvr-zoom-out

 

 

【DEMO38】imghvr-zoom-out-up

 

 

【DEMO39】imghvr-zoom-out-down

 

 

【DEMO40】imghvr-zoom-out-left

 

 

【DEMO41】imghvr-zoom-out-right

 

 

【DEMO42】imghvr-zoom-out-flip-horiz

 

 

【DEMO43】imghvr-zoom-out-flip-vert

 

 

シンプルふわっとblur系

 

【DEMO44】imghvr-blur

 

 

一部、上手く機能していないぽい

classがあるんですが、原因探り中です。

（※DEMO14〜18）

 

公式だと、figcaption要素には

テキストが入っているのですが、

今回のDEMOでは画像を入れています。

その関係かもしれないので、

元ファイルで確認してまた追記します。

 

まとめ

• 画像に動きをつけるならCSSライブラリ「imagehover.css」
• サンプルの中からお気に入りを使っちゃおう