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

サイト構築 -CSS

Post on:2023年8月9日

Izmirの特徴

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

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

Izmir

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

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

Izmirの使い方

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

<link rel="stylesheet" href="css/izmir.min.css">

1	<link rel="stylesheet" href="css/izmir.min.css">

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

<figure class="c4-izmir">
  <img src="https://source.unsplash.com/FaPxZ88yZrw/400x300" alt="Sample Image">
  <figcaption>
      <h3>
        Some sample text
      </h3>
    </div>
</figure>

<h3>

Some sample text

</h3>

</div>

</figure>

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

Installation: Izmir

Izmirのカスタマイズ

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

How to Customise: Izmir

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

<figure class="c4-izmir c4-border-vert">
    <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image">
    <figcaption>
        // Caption text
    </figcaption>
</figure>

// Caption text

</figcaption>

</figure>

Border Animaiton

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

<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>

// Caption text

</figcaption>

</figure>

Image Animation

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

<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>

<h3>

Sample Text

</h3>

</div>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

</p>

</div>

</figcaption>

</figure>

Text Animation

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

<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>

// Caption text

</figcaption>

</figure>

Overlay Style

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

<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>