In this guide, you will learn everything you need to know about the carousel hover effect settings and how they work. There are eleven different hover effects to choose from such as grow, shrink, bounce, pulse, wobble, etc. and each of those allow you to adjust the settings such as the animation duration and other values. These elegant hover effects provide a very nice user experience for website visitors. The hover settings can all be found in with the other carousel settings in Row settings>Column settings>Carousel tab in the Hover Settings toggle. You should also check out the hover settings demo to get some inspiration, or download our free layouts in the demo site to give you a quick start!
View Live Demo
View Settings List
Divi Carousel Maker provides you a feature to set different hover effects on the modules. To see the Module Hover Effects option you need to scroll down to the bottom under the carousel tab. By default, the value is set to none and we can change it by clicking on the dropdown. Once the hover effect is selected then we see the additional settings that allow us to make the adjustments in the hover effect.
The Grow hover effect will scale or grow the carousel module on hover
The Shrink hover effect will shrink or narrow the carousel module on hover
The Bounce hover effect will bounce the carousel module on hover
The Pulse hover effect will increase and decrease the size of the carousel module simultaneously on hover giving a pulse effect
The Bob hover effect will up and down the carousel module on hover
The Push up hover effect will push the carousel module up on hover
The Push down hover effect will push the carousel module down on hover
The Vertical Wobble hover effect will wobble the carousel module vertically on hover
The Horizontal Wobble hover effect will wobble the carousel module horizontally on hover
The Fade hover effect will fade the carousel module on hover
The Grayscale hover effect will provide the black and white tint to the carousel module on hover
Size Change Factor
This property changes the factor by which the size of the module changes when the person hovers over the module. Higher the value of the Size Change Factor, more scaled or aggressive will be the effect. By default, the value of this property is set to 1
This property allows you to speed up or slow down the animation by adjusting the animation duration. The duration value is in milliseconds and the default value is 500ms or 0.5s
Animation Speed Curve
This property allows you to adjust the ease of your animation. Easing the animation in and out will create a smoother effect as compared to the linear curve.