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

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

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

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

Izmir
Izmir -GitHub

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

sponsors

top of page

©2024 coliss