Izmir Hover Effects

Izmir Hover Effectsは画像へのマウスホバーの際に様々なエフェクトを組み合わせて実装、管理できるCSSエフェクトライブラリです

20のボーダーアニメーションエフェクト、9の画像アニメーションエフェクト、12のテキストアニメーションエフェクト、オーバーレイやカラーなどが全てclassで管理されており、組み合わせる事で1000以上のエフェクトのパターンを作れるよう設計されているそうです

各エフェクトは全てclassで管理されています。例えば上サンプルなら

<figure class="c4-izmir c4-border c4-border-corners-2 c4-image-pan-left">
</figure>

親要素に、izmirを使うためのclass、ボーダーアニメーションを加えるclass、ボーダーエフェクトの種類を指定するclass、左にパーンするclassを付与しています

<img src="foo.jpg" alt="Sample Image">
<figcaption class="c4-layout-top-right">
        <div class="c4-reveal-left">
          <h2>
            hoge
          </h2>
        </div>
        <div class="c4-reveal-left c4-delay-200">
          <h2>
            huga
          </h2>
        </div>
        <div class="c4-reveal-left c4-delay-400">
          <h2>
            piyo
          </h2>
        </div>
      </figcaption>

画像を読み込んで各テキスト要素にテキストエフェクト用のclassを加えます。これで完成です

これらのclassを組み合わせると1000ものエフェクトの種類を実装できる、という感じです

スマフォ時代の昨今でこういったマウスホバーエフェクトは以前より求められなくなった印象ではありますが、便利は便利ですし、需要が0でもないので覚えて多くと役に立つかもしれませんね。ライセンスはMIT。

Izmir Hover Effects