画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法

Lightboxを使用しているページで画像をクリックすると拡大表示されることをユーザに分かりやすくしたい。画像下に「クリックで拡大表示」等表記するのが楽だけどデザイン的に微妙だったりする。「Izmir」というCSSライブラリを使用することで画像ホバー時にエフェクト追加&テキスト表示できる。以下に利用方法をメモ。

Izmir

公式サイト

https://ciar4n-izmir.netlify.app/

GitHub

https://github.com/ciar4n/Izmir

CDN

CDNで使う場合は以下を記述する。

<link href=" https://cdn.jsdelivr.net/npm/@ciar4n/izmir@1.0.1/izmir.min.css" rel="stylesheet">

サンプル

https://taitan916.info/sample/Izmir/

画像ホバー時に灰色背景&ボーダー表示のエフェクトと「クリックで拡大」という文字が表示される筈。

利用方法

ソースコード

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href=" https://cdn.jsdelivr.net/npm/@ciar4n/izmir@1.0.1/izmir.min.css" rel="stylesheet">
<script src=" https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/js/lightbox.min.js"></script>
<link href=" https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css" rel="stylesheet">

<a href="test.jpg" rel="lightbox">
    <figure class="c4-izmir c4-border-fade" style="--primary-color: #ccc;">
        <img src="test.jpg">
        <figcaption class="c4-layout-bottom-right">
            <h4>クリックで拡大</h4>
        </figcaption>
    </figure>
</a>

その他

基本的な使い方は公式のこちらのページを参照すること。

背景色や文字色を変更したい場合はこちらのページを参照。