Pure CSS Image Hover Effect Library　CSSで作られたイメージホバーエフェクトを大量に使えるCSSライブラリー

ここがおすすめ

大量のエフェクトパターンから簡単なコードでイメージホバーエフェクトを実装できておすすめです。

Pure CSS Image Hover Effect Library動作デモ

• Imagehover.css – A Pure CSS Image Hover Effect Library | imagehover.css
  

Pure CSS Image Hover Effect Library公式サイト

• Imagehover.css – A Pure CSS Image Hover Effect Library | imagehover.css
  

導入方法

Pure CSS Image Hover Effect Libraryを使うには、

• 1.ファイルの取得と読み込み
• 2.htmlの記述とクラスの付加

が必要になります。
以下、詳しく解説します。

必要ファイルの取得と読み込み

必要なファイルは

• imagehover.css(もしくはimagehover.min.css)
  

上記「公式サイト」項目内Pure CSS Image Hover Effect Library公式サイトよりダウンロードできます。

上記ファイルをhtmlに読み込ませます。
ファイルのパスはご自身の作業環境(ディレクトリー構成)に合わせて適宜変更してください。

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

htmlの記述とクラスの付加

続いて、Pure CSS Image Hover Effect Libraryの規定にそってhtmlの記述を行います。
imgタグとfigcaptionタグ、aタグをfigureタグで囲い、figureタグに動作させたいホバーエフェクトのクラス名を付加します。

<figure class="imghvr-fade">
　　<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
　　<figcaption>
　　　　<h3>Hello World</h3>
　　　　<p>Life is too important to be taken seriously!</p>
　　</figcaption>
　　<a href="javascript:;"></a>
</figure>

クラス名については、上記した「Pure CSS Image Hover Effect Library公式サイト」に、すべての動作とクラス名が記述されています。

以上、Pure CSS Image Hover Effect Libraryの設定方法の説明でした。
オプションなどの詳細は、上記公式サイトにて確認してください。