2016/04/17
コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印象を与えますよね。
今回は、そんな画像のアニメーションエフェクトを、CSSを知らなくてもコピペだけで簡単に実装出来てしまうライブラリのご紹介です。
CSSのファイルサイズはわずか19KB。
利用しない手はありません。
画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css
imagehover.cssは、画像のホバーエフェクトを簡単にアニメーションさせられるCSSライブラリです。
CSSだけで動き、クラス名を指定するだけで実装可能なので、CSSの知識がなくても、大丈夫。
コピペだけで、クールなアニメーションエフェクトを利用できるスグレモノです。
無料版と有料版がありますが、無料版は44種類のエフェクトがあり、有料版ではなんと216種類ものエフェクトを利用できます。
Demo
imagehover.cssの使い方
使い方も至って簡単です。
Imagehover.cssのサイトから、imagehover.cssファイルをダウンロードして、利用したいサイトに読み込み、アニメーション専用のクラス名を指定するという流れです。
外部スタイルシートを読み込む
head内にimagehover.cssを読み込みます。
1 2 3 |
<head> <link rel="stylesheet" href="css/imagehover.min.css"> </head> |
HTML部分を準備しクラス名を指定する
HTMLではfigure要素を利用して、figure要素にアニメーション専用のクラス名を記述します。
たとえば、スライドアップするアニメーションなら、imghvr-slide-upというクラス名を記述します。
そして、img要素で画像を配置し、figcaptionでホバーしたときに表示させたいコンテンツを記述します。
1 2 3 4 5 6 |
<figure class="imghvr-slide-up"> <img src="sample.jpg"> <figcaption> // ホバーしたときに表示させたいコンテンツを記述 </figcaption> </figure> |
基本はこれだけです。
これだけでクールなアニメーションのホバーエフェクトを実装できるのですから、すばらしい。
リンクさせたいとき
リンクを付けたいときは、figcaption要素の下にa要素を加えるだけです。
1 2 3 4 5 6 7 |
<figure class="imghvr-slide-up"> <img src="sample.jpg"> <figcaption> // ホバーしたときに表示させたいコンテンツを記述 </figcaption> <a href="sample.html"></a> </figure> |
背景カラーを変更する
デフォルトでは、背景カラーはブルーになっていますが、CSSで一度に変更可能です。
そのとときは、以下のように指定します。
1 2 3 4 |
[class^='imghvr-'], [class*=' imghvr-'] { background-color: #D14233; } |
個別に背景カラーを変更したいときには、figure要素部分にsytle属性を記述することで、背景カラーを変更できます。
1 2 3 4 5 6 7 |
<figure class="imghvr-slide-up" style="background-color:#D14233;"> <img src="sample.jpg"> <figcaption> // ホバーしたときに表示させたいコンテンツを記述 </figcaption> <a href="sample.html"></a> </figure> |
これは手軽で便利です!
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
WordPressにベストな格安レンタルサーバーはこれです!
WordPressでレンタルサーバーを選ぶ場合のおすすめサーバーご紹介します。 新しくWordPr
-
-
レスポンシブ対応のコンテンツスライダー/スライドショーベスト8
以前の記事「レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+」
-
-
ユーザーを魅了するcodrops作成のマウスオーバーエフェクト21
CSS3対応のブラウザーが増えているおかげで、マウスオーバーエフェクトにも凝った演出を施しているサイ
-
-
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利
「このサイトのココどうやっているんだろう?」そう思ったとき、 ソースを見るか、Chromeのデベロ
-
-
トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」
トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定
-
-
SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」
今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし
-
-
シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11
CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できて
-
-
グラフィックデザイナーのためのオンラインポートフォリオ作成方法
グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない
-
-
CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」
CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと
-
-
無料で使えるフラットデザインUIキット40
フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン