[CSS]画像にキャプションをさまざまなCSS3アニメーションで表示するスタイルシート、コピペで簡単に利用できます -iHover

サイト構築 -CSS

Post on:2014年4月8日

sponsorsr

スクリプトは不要、ピュアCSSで画像ホバー時にさまざまなCSS3アニメーションでキャプションを表示するスタイルシートを紹介します。

Sassも用意されており、Bootstrapにも完全対応（動作にBootstrapは必要ありません）、モジュール式のコードなので使い勝手もよいと思います。

iHover -GitHub

iHoverのデモ
iHoverの使い方

iHoverのデモ

アイデアの元となったのはCodropsの「CIRCLE HOVER EFFECTS」で、その7種類のエフェクトからインスパイアされてトータル35種類のホバーエフェクトを楽しめます。

デモページ

数多くのデモがあり、その中のサークルタイプのものからいくつかアニメーションGIFにしてみました。

Effect 1, 2

Effect 5, 6

Effect 10, 11

Effect 16, 18

サークル以外にも矩形の画像を使ったスクエアタイプのデモもあります。

デモページ：スクエア

iHoverの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。
※スクリプトは不要です。

<head>
  ...
  <link href="styles/ihover.css" rel="stylesheet">
</head>

Step 2: HTML

基本的にはノーマル時に表示するサークル（スクエア）とホバー時のものをdivで内包します。細かい点が各デモごとに異なるので、それぞれのデモページを参考にしてください。

Effect 1だと、こんな感じです。

<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>