オシャレなホバーエフェクトを実装できるihoverを試してみました #CSS3

オシャレなホバーエフェクトを実装できるihoverを試してみました。
これを使うと画像を円形に加工して表示したり、マウスオーバーで文字を表示したりできます。

実際の動作はデモページで確認するのがわかりやすいと思います。
http://gudh.github.io/ihover/dist/index.html

必要なファイルのダウンロードはGitHubから行うみたいです。
https://github.com/gudh/ihover

Zipを解凍するといろいろなファイルが用意されていますが、必要なのはsrcフォルダ内のihover.cssだけです。
それ以外のファイルはデモページを動かすのに使うみたいです。

実際にサンプルコードを使って動作確認してみました。ihover.cssがあれば動作しますが、デモ用の画像ファイルも用意されているのでそちらも使って確認しました。画像ファイルは clientフォルダのimagesフォルダ内に用意されています。

用意したファイルはこんな感じです。

index.htmlの内容は次のとおりです。デモページに記載されていたサンプルコードを元につくってあります。
Bootsrapも使っていますが、表示位置を調整するために使っているだけで、これが無くても問題なく動作すると思います。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link href="styles/ihover.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css"></link>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="row">
      <div class="col-sm-6">
        <!-- normal -->
        <div class="ih-item circle effect1">
          <a href="#">
            <div class="spinner"></div>
            <div class="img">
              <img src="images/assets/2.jpg" alt="img">
            </div>
            <div class="info">
              <div class="info-back">
                <h3>Heading here</h3>
                <p>Description goes here</p>
              </div>
            </div>
          </a>
        </div>
        <!-- end normal -->
      </div>
      <div class="col-sm-6">
        <!-- colored -->
        <div class="ih-item circle colored effect1">
          <a href="#">
            <div class="spinner"></div>
            <div class="img">
              <img src="images/assets/5.jpg" alt="img">
            </div>
            <div class="info">
              <div class="info-back">
                <h3>Heading here</h3>
                <p>Description goes here</p>
              </div>
            </div>
          </a>
        </div>
        <!-- end colored -->
      </div>
    </div>
  </body>
</html>

これで実際に動作するのを確認できると思います。
後は他のサンプルコードを参考にしてカスタマイズしていけると思います。