Hover Animation Plugin for WPBakery Page Builder
(formerly Visual Composer)
Hover Animation lets you place animated effects on your WPBakery Page Builder elements upon hover. Scroll down the page to see what other awesome things this plugin can do.
Try hovering your mouse over to any of the animals, and check out the different effects that pop up. Hover Animations gives you the power to choose how your animations behave.
With the exception of females looking out for their cubs, tigers usually keep to themselves.
Zebras are very social animals that often travel in groups. A group of zebras is called a harem.
Just like dogs, crocodiles can’t sweat. They keep their mouths open so they keep their bodies cool.
The ostrich is the fastest runner of all two-legged animals. It can also sprint at over 70km/hour.
Giraffes’ legs usually amount up to 6ft in length. That’s taller than the average human’s height.
This plugin also gives you control over individual elements – like buttons, text boxes, and more – so that you can direct how they behave upon hovering.
Your animations don’t have to be uniform, too. You can combine multiple animations and effects – like here, in Katya’s blog – to achieve a unique look.
You can also incorporate animations to work together. Below, you can see how all the elements work well with the video background when you hover your mouse over the field.
Book now to get a 50% discount
Paradise Resorts is your home away from home. Unwind and relax in our 5-Star rooms, complete with 5-Star amenities and top-notch service. Book a summer with us today.
Unwind in Style
New Parameters for Rows
You can use these additional parameters in WPBakery Page Builder Rows and WPBakery Page Builder Rows Inner.
|hover_anim||string||This animation will play when your mouse hovers on this row. You can also place hover animations on elements inside this row to also animate them together with this row.|
|hover_anim_zoom_opacity||1.0||number||The opacity of the zoomed image when hovered on. This can be used to show the background image a bit. Value should be from 0.0 to 1.0.|
|hover_anim_color||rgba(0,0,0,0.75)||string||The color of the background when hovering.|
|hover_anim_shadow||moderate||string||The intensity of the shadow that appears on hover.|
|hover_anim_scale_amount||1.07||number||The scale amount. 0.0 – 1.0 means the element will scale down, 1.0+ will scale up the element.|
|hover_anim_speed||normal||string||The speed of the hover behavior.|
|hover_anim_link||number||You can turn this entire row into a link. If you add a link, the contents of the row will no longer be clickable.|
New Parameters for WPBakery Page Builder Elements
You can use additional parameters in WPBakery Page Builder elements.
|hover_anim||string||This animation will play when your mouse hovers on this element, or on this element\’s row.|
|hover_anim_color||#ffffff||color||The text color to change to on hover.|
|hover_anim_move||10||number||The amount in pixels to move the element on hover.|
|hover_anim_move_hide_start||string||Make element hidden before hovering|
|hover_anim_move_hide_end||string||Make element hidden after hovering.|
|hover_anim_move_before||string||Move before hovering.|
|hover_anim_scale||1.07||number||The scale amount. 0.0 – 1.0 means the element will scale down, 1.0+ will scale up the element.|
|hover_anim_speed||normal||string||The pause duration between animations (in milliseconds).|
|hover_anim_delay||0||number||The time in milliseconds to delay the start of the animation.|