Lightboxで拡大可能な画像とわかるようにマウスホバー時のカーソルを変更する方法

mouse-cursor-zoom-thumbnail

ふわっと画像を拡大させるエフェクトが実装できるLightbox。

WordPressでは、専門知識がない方でも簡単にLightbox導入できるプラグインが豊富です。その中でも私は「Simple Lightbox」というWordPressプラグインをブログ開設当時から愛用しています。

使い方としては、画像に元画像へのアンカーリンクを貼るだけですが、初見で訪問してくれた方に「拡大可能な画像」というのが伝わるか定かではありません。

マウスオーバーされた時点で、「あ、この画像大きくして見れるんだ」ということがわかってもらえれば、訪問者に今まで以上にLightboxを有効活用してもらえそうですよね。

そこで今回は、拡大可能な画像とわかるように、マウスホバー時にカーソルを変更して視認性を上げるカスタマイズをしてみました。

最終完成イメージ

カスタマイズ完成イメージです。

mouse-cursor-zoom-01

完成イメージGIF画像

ホバーアイコンは虫眼鏡にしました。

カスタマイズの手順

  • 画像ホバー時のカーソルアイコンを変更する
  • Lightboxが反映する画像を指定する

画像ホバー時のカーソルアイコンを変更する

まずは、アンカーリンク付きで画像を貼ります。

<a href="画像パス" width="元サイズ"><img src="画像パス" width="記事内表示サイズ"></a>

WordPressなら、画像選択時にリンク先を[メディアファイル]にしておけばOKです。

mouse-cursor-zoom-02

メディアファイルを選択

以下、カーソルを虫眼鏡にするCSSです。

a:hover img { cursor: zoom-in; }

cursorプロパティは他にもたくさんあります。

参考に紹介リンクを貼っておきます。

[blogcard url=”https://developer.mozilla.org/ja/docs/Web/CSS/cursor”]

Lightboxが反映する画像を指定する

このままだと、リンク先が画像ではない普通の画像リンクにも反映されてしまうので、拡大する画像専用のセレクタを作ります。

<div class="lightbox"><a href="画像パス" width="元サイズ"><img src="画像パス" width="記事内表示サイズ"></a></div>
.lightbox a:hover img { cursor: zoom-in; }

このようにすれば、lightboxセレクタで囲まれた画像のみで虫眼鏡アイコンに変化します。

mouse-cursor-zoom-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

日本語が含まれない投稿は無視されます。(スパム対策)