【WordPress】画像にホバーエフェクトをつけてクルクルしたり、裏返して遊ぶ

【WordPress】画像にホバーエフェクトをつけてクルクルしたり裏返して遊ぶ
tochiblog執筆者情報

画像にマウスをのせたとき、スマホでタップしたとき、動きがあると興奮する性分です。

今回はホバーエフェクトを手軽に実装できるプラグイン『Image Hover Effects Ultimate』をご紹介します。

イメージは見てもらった方が早いですね。
(実際にクライアントワークでImage Hover Effectsを使いサイト制作をいたしました。リンクを本記事の最後に貼っていますので見てってください)


こんな感じのホバーができます。

※遊びすぎ注意(゚д゚)!

①Button Effects(ボタンリンク)
②General Effects(ひょっこっと動く)
③Square Effects(クルクルしたり)
④Caption Effects(テキストもたっぷり)
⑤Flipbox Effects(くるりん)
⑥Magnifier Effects(拡大鏡)
⑦Comparison Effects(before/after)

WordPressプラグイン「Image Hover Effects Ultimate」の実装方法

①プラグイン『Image Hover Effects Ultimate』を新規追加する

①プラグイン『Image Hover Effects Ultimate』を新規追加する

②『Image Hover Effects Ultimate』をインストール後、有効化

②『Image Hover Effects Ultimate』をインストール後、有効化

③『Image Hover』からエフェクトのタイプを選択

③『Image Hover』からエフェクトのタイプを選択

④スタイルを決める

④スタイルを決める

⑤のちに作られるショートコードの名前をつける(非表示部分・わかればOK)

⑤のちに作られるショートコードの名前をつける(非表示部分・わかりやすければOK)

⑥プレビューからEdit(編集)をクリック

⑥プレビューからEdit(編集)をクリック

⑦ホバー時に表示するテキストやボタンリンクを設定

⑦ホバー時に表示するテキストやボタンリンクを設定

⑧ショートコードをコピー

⑧ショートコードをコピー

⑨投稿画面にペースト

⑨投稿画面にペースト

⑩完成!

簡単でしょ、ぴよ。

まとめ:【WordPress】画像にホバーエフェクトをつけてクルクルしたり、裏返して遊ぶ

まとめ:【WordPress】画像にホバーエフェクトをつけてクルクルしたり、裏返して遊ぶ

名簿みたいなモノにいいなと思い、実際のサイト制作案件で『Image Hover Effects Ultimate』を使用してみました。

リンクを貼っておきますので、ご興味あればどうぞ。
»近畿大学ボクシング部ホームページ