![](https://morisaki.xyz/wp-content/uploads/2022/05/441a1ee87ec41d9b2d8cd2458fd9fa1f.png)
![](https://morisaki.xyz/wp-content/uploads/2022/05/563610ef084c34ba5918b902099e8f12.png)
ホバー・アニメーションとは、HPにアップロードされた画像にマウスを持っていくと画像が動く仕掛けを総称してホバー・アニメーションと言います。ホバーは別名でオンマウスとかマウスオーバーとかとも呼ばています。
何れにしてもHP上の画像にちょっとした動きを与え、見た目で閲覧者を取り込もうと言う姑息と言ったらそれまでですが、Elementorにある無料で使える機能で、使わない手はないと思って筆者は盛んに使いだした有り難い機能の一つです。
設定方法は、アップロードした画像をクリックして、スタイル~マウスオーバー~ホバー時のアニメーションと辿って、プルダウンメニューの中から沢山あるアニメーションタイプの中から一つを選択すれば、画像に望みの動きを付けることが実現します。
今回は、約30個弱あるアニメーションの動きが分かるホバー・アニメーションを一同に会して紹介してみました。
![](https://morisaki.xyz/wp-content/uploads/2018/03/snycy.png)
Grow
![](https://morisaki.xyz/wp-content/uploads/2018/03/x.venox_.png)
Shrink
![](https://morisaki.xyz/wp-content/uploads/2018/03/quest.png)
Pulse
![](https://morisaki.xyz/wp-content/uploads/2018/03/zusman.png)
Pulse Grow
![](https://morisaki.xyz/wp-content/uploads/2018/03/zing.png)
Pulse Shrink
![](https://morisaki.xyz/wp-content/uploads/2018/03/madrin.png)
Push
![](https://morisaki.xyz/wp-content/uploads/2018/03/geo-2.png)
Pop
![](https://morisaki.xyz/wp-content/uploads/2018/03/larozse.png)
Bounce In
![](https://morisaki.xyz/wp-content/uploads/2018/03/mapmaster.png)
Bounce Out
![](https://morisaki.xyz/wp-content/uploads/2018/03/digit.png)
Rotate
![](https://morisaki.xyz/wp-content/uploads/2018/03/masso.png)
Grow Rotate
![](https://morisaki.xyz/wp-content/uploads/2018/03/Edgewater..png)
Float
![](https://morisaki.xyz/wp-content/uploads/2018/03/f48916c5a6ed245347d26ecea5c4629b.png)
Sink
![](https://morisaki.xyz/wp-content/uploads/2018/03/Lobster..png)
Bob
![](https://morisaki.xyz/wp-content/uploads/2018/03/Me..png)
Hang
![](https://morisaki.xyz/wp-content/uploads/2018/03/Manaslu.png)
Skew
![](https://morisaki.xyz/wp-content/uploads/2018/04/ECOCODE.png)
Skew Forward
![](https://morisaki.xyz/wp-content/uploads/2018/10/20150514_arrow.png)
Skew Backward
![](https://morisaki.xyz/wp-content/uploads/2018/12/20181213_sitamuki_arrow.png)
Wobble Vertical
![](https://morisaki.xyz/wp-content/uploads/2018/12/icon-G_S.2.png)
Wobble Horizontal
![](https://morisaki.xyz/wp-content/uploads/2018/12/icon-G_S.1.png)
Wobble To Bottom Right
![](https://morisaki.xyz/wp-content/uploads/2018/12/icon-G_S.4.png)
Wobble To Top Right
![](https://morisaki.xyz/wp-content/uploads/2018/12/icon-G_S.3.png)
Wobble Top
![](https://morisaki.xyz/wp-content/uploads/2019/02/sample-24.jpg)
Wobble Bottom
![](https://morisaki.xyz/wp-content/uploads/2019/02/sample-13.jpg)
Wobble Skew
![](https://morisaki.xyz/wp-content/uploads/2019/02/sample-18.jpg)
Buzz
![](https://morisaki.xyz/wp-content/uploads/2019/02/sample-16.jpg)
Buzz Out
![](https://morisaki.xyz/wp-content/uploads/2019/02/sample-15.jpg)