【WordPress】プラグインを使ったホバー効果。Ultimate Hover Effects

ultimate_hover_effects_s
Ultimate Hover Effectsは画像キャプションのためのモダンでスタイリッシュな目を引く、CSS3トランジションホバー効果を実装できるプラグイン。

効果はデモから確認してみてください。Style2,3,4はPro版の機能です。

Ultimate Hover Effectsプラグイン導入

ダッシュボード >> プラグイン >> 新規追加 >> Ultimate Hover Effectsを検索
有効化にするとU Hover Effectsが追加されます。

ultimate_hover_effects_1
新規追加をします。Style1にチェックを入れます。
※Style2,3,4はPro版のみになります。

ultimate_hover_effects_2

Hover Image ホバーイメージ-Choose Fileをクリックしたらメディアが開きます。
Heading 見出し
Description 説明
Image Link 画像リンク
Effect 効果を選択
Image Width 画像の幅
Move Image Left Right 画像左右に移動します
Move Texts to Bottom or Top ボトムまたはトップにテキストを移動します
Move Texts to Left or Right 左または右にテキストを移動します

公開をクリックし、Shortcodeを表示させたい場所にコピペします。

ultimate_hover_effects_3

カテゴリーも準備されているので、効果ごとに分けたり、全てのホバー効果を同じにせず変えてみたりしてもいいかもしれません。
ちなみにソースコードは下記のようになっていました。

<ul class="grid cs-style-1"><li style="width:278px; margin-left: 0px !important">
<figure>
<img src=" imgurl "/>
<figcaption>
<a style="margin-top:15px;margin-left:15px" href="" target="">
<h3>Heading Here</h3>
<span>Description goes here</span>
</a>
</figcaption>
</figure>
</li></ul>
 
hover effects

【WordPress】プラグインを使ったホバー効果。Ultimate Hover Effects

  • LATEST
  • RELATED
  • POPULAR