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。