2020年6月7日

プラグイン『Pz-LinkCard』のアイキャッチ画像をマウスオーバー時にズームさせるカスタマイズ方法

スポンサーリンク
  • 「内部リンクがテキストリンクのみだと味気ないからリンクカードを設置してみたい」
  • 「動きを付けるためにアイキャッチ画像にマウスをもっていったときに画像がズームするようにしたい」

ということで以下のようなブログカードのアイキャッチ画像ズームのCSSをご紹介します。

リンクカードのアイキャッチ画像ズームでやること

  • wordpressのリンクカードプラグイン『Pz-LinkCard』を設置
  • サムネイル画像部分のに指定されている2つのclass名にそれぞれCSSを指定する

それではいってみましょう!

指定する2つのclassコード

<figure class=”lkc-thumbnail”>
<img class=”lkc-thumbnail-img” src=”” />
</figure>

プラグイン『Pz-LinkCard』のアイキャッチ画像は上記の『lkc-thumbnail』と『lkc-thumbnail-img』2つのクラス名で指定がされています。それぞれの2つのクラス名にCSSを指定していきます。

プラグイン『Pz-LinkCard』の説明は以下のブログがわかりやすかったです。

今回のCSSのポイントは

  • マウスを置いたときに幅は変えずにはみ出た部分は非表示にする『overflow』とその値『 hidden』
  • 動きを出すプロパティ『transition』
  • マウスオーバーした時に拡大する画像を指定をする『transform』

アイキャッチ画像部分のCSSコード

See the Pen
YzwXEwY
by kosukee (@kusukee)
on CodePen.

まとめ

マウスオーバーした時に動きがあると目に留まりますよね!!

内部回遊率の向上に貢献するのかテキストリンクと比較すると面白いかもしれません。

この記事が気に入ったら
いいね ! しよう

Twitter で
スポンサーリンク