• CSS

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

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

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

スポンサードリンク

 

見出し

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

今回ご紹介するのは、

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

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

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

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

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

 

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

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

 

imagehover.cssのサンプル一覧

というわけで、

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

imagehover.cssのデモ一覧です。

 

公式サイトに載っている

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

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

 

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

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

特に意味はないので気になさらず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」
  • サンプルの中からお気に入りを使っちゃおう

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でshunsukeをフォローしよう!

関連記事

  1. imagehover.cssの使い方・設定方法は?反映されない時の対処…

  2. トレンドブログデザインをオシャレに!CSSの習得方法やポイントは?

  3. 【WordPress】メニューのアイコン設置プラグインFont Awe…

ツールバーへスキップ