画像ホバー時にエフェクトを追加したり文字を重ねられる「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>
その他
基本的な使い方は公式のこちらのページを参照すること。
背景色や文字色を変更したい場合はこちらのページを参照。
関連記事
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート
新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...
-
特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法
特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、 ...
-
CSSで親子関連のセレクターをネスト(入れ子)で指定する方法
CSSで親子関連のセレクターを指定する場合「.parent .child{}」の ...
-
jQuery無しで要素にアニメーション効果を設定する方法(animate.css)
あるサイトをWappalyzerで調査していた際に「animate.css」とい ...