WordPress

【WordPress】コピペで使用可能なホバーエフェクトプラグインHover Effects

April 13, 2017
Hover Effects


Hover Effectsはテキストや画像などにホバーエフェクトを施すことができるプラグイン。使用できるエフェクトも多く、使用方法も使用したいエフェクトのクラスを任意の要素にコピペするだけです。

Hover Effectsプラグインを導入

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

使用可能なエフェクト

2D TRANSITIONS

  1. Grow
  2. Shrink
  3. Pulse
  4. Pulse Grow
  5. Pulse Shrink
  6. Push
  7. Pop
  8. Bounce In
  9. Bounce Out
  10. Rotate
  11. Grow Rotate
  12. Float
  13. Sink
  14. Bob
  15. Hang
  16. Skew
  17. Skew Forward
  18. Skew Backward
  19. Wobble Horizontal
  20. Wobble Vertical
  21. Wobble To Bottom Right
  22. Wobble To Top Right
  23. Wobble Top
  24. Wobble Bottom
  25. Wobble Skew
  26. Buzz
  27. Buzz Out
  28. Forward
  29. Backward

SHADOW AND GLOW TRANSITIONS

  1. Shadow
  2. Grow Shadow
  3. Float Shadow
  4. Glow
  5. Shadow Radial
  6. Box Shadow Outset
  7. Box Shadow Inset

SPEECH BUBBLES

  1. Bubble Top
  2. Bubble Right
  3. Bubble Bottom
  4. Bubble Left
  5. Bubble Float Top
  6. Bubble Float Right
  7. Bubble Float Bottom
  8. Bubble Float Left

Hover Effects


ホバーするとどのようなエフェクトか確認ができるので、使用したいエフェクトのhvr- ~ クラスをコピーします。(Grow Rotateを使用する場合はhvr-grow-rotate、Popはhvr-pop、Box Shadow Outsetはhvr-box-shadow-outsetというように)

編集画面

投稿やページ内のテキストや画像などに上記でコピーしたクラスを追加します。
Example:

<p class="hvr-rotate">このテキストにエフェクトをかけます。</p>
<img src="wp-blue.png" alt="WordPress" width="525" height="328" class="hvr-box-shadow-outset alignnone size-large wp-image-895" />


Hover前

Hover後