2016/04/17

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

画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

imagehover.cssは、画像のホバーエフェクトを簡単にアニメーションさせられるCSSライブラリです。
CSSだけで動き、クラス名を指定するだけで実装可能なので、CSSの知識がなくても、大丈夫。
コピペだけで、クールなアニメーションエフェクトを利用できるスグレモノです。
無料版と有料版がありますが、無料版は44種類のエフェクトがあり、有料版ではなんと216種類ものエフェクトを利用できます。

Demo

imagehover.cssの使い方

使い方も至って簡単です。
Imagehover.cssのサイトから、imagehover.cssファイルをダウンロードして、利用したいサイトに読み込み、アニメーション専用のクラス名を指定するという流れです。

外部スタイルシートを読み込む

head内にimagehover.cssを読み込みます。

<head>
  <link rel="stylesheet" href="css/imagehover.min.css">
</head>

<head>

</head>

HTML部分を準備しクラス名を指定する

HTMLではfigure要素を利用して、figure要素にアニメーション専用のクラス名を記述します。
たとえば、スライドアップするアニメーションなら、imghvr-slide-upというクラス名を記述します。
そして、img要素で画像を配置し、figcaptionでホバーしたときに表示させたいコンテンツを記述します。

<figure class="imghvr-slide-up">
  <img src="sample.jpg">
  <figcaption>
    // ホバーしたときに表示させたいコンテンツを記述
  </figcaption>
</figure>

// ホバーしたときに表示させたいコンテンツを記述

</figcaption>

</figure>

基本はこれだけです。
これだけでクールなアニメーションのホバーエフェクトを実装できるのですから、すばらしい。

リンクさせたいとき

リンクを付けたいときは、figcaption要素の下にa要素を加えるだけです。

<figure class="imghvr-slide-up">
  <img src="sample.jpg">
  <figcaption>
    // ホバーしたときに表示させたいコンテンツを記述
  </figcaption>
  <a href="sample.html"></a>
</figure>

// ホバーしたときに表示させたいコンテンツを記述

</figcaption>

</figure>

背景カラーを変更する

デフォルトでは、背景カラーはブルーになっていますが、CSSで一度に変更可能です。
そのとときは、以下のように指定します。

[class^='imghvr-'],
[class*=' imghvr-'] {
  background-color: #D14233;
}

[class^='imghvr-'],

[class*=' imghvr-'] {

background-color: #D14233;

}

個別に背景カラーを変更したいときには、figure要素部分にsytle属性を記述することで、背景カラーを変更できます。

<figure class="imghvr-slide-up" style="background-color:#D14233;">
  <img src="sample.jpg">
  <figcaption>
    // ホバーしたときに表示させたいコンテンツを記述
  </figcaption>
  <a href="sample.html"></a>
</figure>