HTMLはシンプル! 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
Post on:2023年8月9日
画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量(2Kb)ライブラリを紹介します。
HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせて実装することができます。
Izmirの特徴
Izmirは、画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSのライブラリです。エフェクト用のclassはかなりの数が用意されており、HTMLにclassを追加するだけで、完璧なホバーエフェクトを実装できます。
MITライセンスで、商用プロジェクトでも無料で利用できます。
主な特徴は、下記の通り。
- エフェクトは数千通りの組み合わせが可能。
- ボーダーのエフェクトは、20種類
- 画像のエフェクトは、9種類
- オーバーレイのスタイルは、8種類
- テキストのエフェクトは、12種類。
- テキストレイアウト用のclass。
- アニメーション遅延のclass。
- ボーダーの幅・余白・カラーは、カスタマイズ可能。
- 画像ホバーの不透明度・カラー・グラデーションは、カスタマイズ可能。
- フォーカス時にホバーがトリガーされるので、アクセシブル。
- ファイルサイズは非常に軽量(2Kb)。
Izmirの使い方
使い方は、簡単です。
izmir.min.css
を外部ファイルとして記述します。
1 |
<link rel="stylesheet" href="css/izmir.min.css"> |
あとは、画像にclass(基本のclass.c4-izmir
)を加えます。さらに、classを組み合わせることで、さまざまなエフェクトも簡単に実装できます。
1 2 3 4 5 6 7 8 |
<figure class="c4-izmir"> <img src="https://source.unsplash.com/FaPxZ88yZrw/400x300" alt="Sample Image"> <figcaption> <h3> Some sample text </h3> </div> </figure> |
詳しくは、下記をご覧ください。
Izmirのカスタマイズ
画像のホバーエフェクトは、classを適用するだけで簡単に実装できます。基本となるclass(.c4-izmir
)とさまざまなエフェクト用のclassを組み合わせて記述します。
まずは、ボーダーのエフェクト。
基本となるclass(.c4-izmir
)とボーダー用のclass(.c4-border-vert
など)を組み合わせて記述します。ボーダーのエフェクトは20種類あります。
1 2 3 4 5 6 |
<figure class="c4-izmir c4-border-vert"> <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image"> <figcaption> // Caption text </figcaption> </figure> |
続いて、画像のエフェクト。
基本となるclass(.c4-izmir
)と画像用のclass(.c4-image-zoom-in
など)を組み合わせて記述します。ズームイン・ズームアウト・パン・回転・ブラーなど、画像のエフェクトは9種類です。
1 2 3 4 5 6 |
<figure class="c4-izmir c4-image-zoom-in"> <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image"> <figcaption> // Caption text </figcaption> </figure> |
テキストのエフェクトは、画像をホバーするとさまざまなアニメーションでテキストを表示します。テキストはfigcaption
内にdiv
で実装します。テキストのエフェクトは12種類です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<figure class="c4-izmir"> <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image"> <figcaption> <div class="c4-reveal-up"> <h3> Sample Text </h3> </div> <div class="c4-reveal-up"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. </p> </div> </figcaption> </figure> |
画像をホバーしたときのオーバーレイは8種類が用意されており、テキストのコントラストがより読みやすくなります。
1 2 3 4 5 6 |
<figure class="c4-izmir c4-gradient-top-left"> <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image"> <figcaption> // Caption text </figcaption> </figure> |
キャプションのレイアウトも豊富に用意されています。figcaption
にclass(.c4-layout-bottom-left
など)を加えます。もちろん、前述のほかのエフェクトと組み合わせて使用できます。
1 2 3 4 5 6 7 8 |
<figure class="c4-izmir"> <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image"> <figcaption class="c4-layout-bottom-left"> <h4> Sample Text </h4> </figcaption> </figure> |
sponsors