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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
波打つようなクリックエフェクトを実装できる「Waves」
今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹
-
-
レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35(〜2013年9月まで)
レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ
-
-
CSSで表現されたスゴワザのテキストエフェクト&チュートリアル19
CSS3では、CSSでさまざまなテキストエフェクトを実現することが可能です。 今回は、CSSで表現
-
-
プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100
HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ
-
-
リボン風の見出しをCSS3だけで実装する方法
見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。 利用するのはboderプロパテ
-
-
デザインのヒントはここに!海外の人気ブログで評価の高かった2013年のWEBデザイン60
新年を迎え、2013年のまとめ的な記事が海外ブログでも続々とアップされています。 そんななかから今
-
-
WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」
WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code
-
-
コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js
すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画
-
-
WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80
WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ
-
-
Joomla!の無料テンプレート123 レスポンシブWEBデザイン対応もあり
Joomla!(ジュームラ)は高機能で使いやすいと評判のCMSです。 ドメイン、サーバー込みで無料