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

Post on:2014年4月8日

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

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

サイトのキャプチャ

iHover -GitHub

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>

sponsors

top of page

©2024 coliss