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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
文字をカラフルに!CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」
CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色
-
-
全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121
2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン
-
-
リボン風の見出しをCSS3だけで実装する方法
見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。 利用するのはboderプロパテ
-
-
CSSグラデーションをとっても簡単に生成するツール「Gradientoo」
CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき
-
-
コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表25
海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージ
-
-
HTML5ビデオにも対応できる無料動画変換ツール/コンバーター10
HTML5ビデオを利用したサイトも見かけるようになってきました。 今後はHTML5ビデオを利用する
-
-
CSSアニメーションを使ったエフェクトライブラリー9
CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい
-
-
これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22
CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。
-
-
twitterでのキーワードのひろがりを調べられるツール「twimp」
twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した
-
-
WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80
WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ
