HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir

画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。

HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせて実装することができます。

Izmir
Izmir -GitHub

• Izmirの特徴
• Izmirの使い方
• Izmirのカスタマイズ

Izmirの特徴

Izmirは、画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSのライブラリです。エフェクト用のclassはかなりの数が用意されており、HTMLにclassを追加するだけで、完璧なホバーエフェクトを実装できます。

MITライセンスで、商用プロジェクトでも無料で利用できます。

Izmir

主な特徴は、下記の通り。

• エフェクトは数千通りの組み合わせが可能。
• ボーダーのエフェクトは、20種類
• 画像のエフェクトは、9種類
• オーバーレイのスタイルは、8種類
• テキストのエフェクトは、12種類。
• テキストレイアウト用のclass。
• アニメーション遅延のclass。
• ボーダーの幅・余白・カラーは、カスタマイズ可能。
• 画像ホバーの不透明度・カラー・グラデーションは、カスタマイズ可能。
• フォーカス時にホバーがトリガーされるので、アクセシブル。
• ファイルサイズは非常に軽量（2Kb）。

Izmirの使い方

使い方は、簡単です。
izmir.min.cssを外部ファイルとして記述します。

あとは、画像にclass（基本のclass.c4-izmir）を加えます。さらに、classを組み合わせることで、さまざまなエフェクトも簡単に実装できます。

詳しくは、下記をご覧ください。

Installation: Izmir

Izmirのカスタマイズ

画像のホバーエフェクトは、classを適用するだけで簡単に実装できます。基本となるclass（.c4-izmir）とさまざまなエフェクト用のclassを組み合わせて記述します。

How to Customise: Izmir

まずは、ボーダーのエフェクト。
基本となるclass（.c4-izmir）とボーダー用のclass（.c4-border-vertなど）を組み合わせて記述します。ボーダーのエフェクトは20種類あります。

Border Animaiton

続いて、画像のエフェクト。
基本となるclass（.c4-izmir）と画像用のclass（.c4-image-zoom-inなど）を組み合わせて記述します。ズームイン・ズームアウト・パン・回転・ブラーなど、画像のエフェクトは9種類です。

Image Animation

テキストのエフェクトは、画像をホバーするとさまざまなアニメーションでテキストを表示します。テキストはfigcaption内にdivで実装します。テキストのエフェクトは12種類です。

Text Animation

画像をホバーしたときのオーバーレイは8種類が用意されており、テキストのコントラストがより読みやすくなります。

Overlay Style

キャプションのレイアウトも豊富に用意されています。figcaptionにclass（.c4-layout-bottom-leftなど）を加えます。もちろん、前述のほかのエフェクトと組み合わせて使用できます。

Caption Layout