How to use the Hover Slider to show other element set on hover

The Hover Slider is an Element with a slide appearing when you hover the mouse on a Group for some time without clicking. It adds interaction to Groups and Grid Cells as you can show different sets of Elements for normal and mouse-hover states. To add the Hover Slide, select a Group. Modify the needed properties in the Hover Slide section of the Property Panel.
Hover Slider

Browse By Feature Categories

Hover Slider Fade Effect

Any Animation Library starts with Fade. The Hover Slider also has the Fade Preset, which you can add for the Transition from the default slide of the Hover to the Hover Slider. You can modify the Fade properties in the Property Panel, click on the Hover Slide link. You can also add the Hover Slider as an Element from the Add Menu.

Hover Slider Over Effect

The Hover Slider usually shows the different Elements on Hover. You can add the Slide Over Effect if you go to the Property Panel, and edit the Hover Slider properties for the selected Group. You add the Hover Slider Element from the Add Menu. You can also modify the Direction and Duration if needed.

Hover Slider Slide Effect

The Slide Effect for the Hover Slider shows the natural slide movement that adds live interaction to your design. Apply the Slide Effect for the Hover Slider Element in the Hover Slider properties. Test by selecting the Hover Slider in the Editor and hovering the Element.

Hover Slider Flip Effect

Flipping also makes an interesting impact on interaction on web pages. Using Flip Effect on the Hover may attract attention, and wow your visitors. To set the Flip Effect for the Hover Slider, go to the Property Panel's Hover Slider section, and select the Flip Preset.

Hover Slider Wobble Effect

You can attract the attention of your website visitor by the Wobble Effect used for the Hover Slider. To use the Effect go to the Property Panel's Hover Slider link, and select the Wobble Preset. Additionally, you can fine-tune Transparency, Duration, and Direction.

Hover Slider Zoom Effect

Zooming is also very natural, as we are living the ear of cameras everywhere, and you can use the Zoom Effect on the Hover Slider. Go to the Property Panel, and choose the Zoom Preset for the Hover Slider Element. Modify its properties if needed.

How To Create The Hover Slider For A Group Of Elements

Our hover slider animation can also be referred to as a hover box slider. It sets the hover box animation for the whole group of elements, making the structure more laconic and homogeneous. It is mostly used as the image hover effect, particularly for gallery groups. When the visitor hovers over one of the elements, the hover box with content description text or heart or like icon appears. This image hover effect slider for the group of elements is very popular within social media and platforms, implying interaction with the users using the hover box as a basic unit.

Similar to other stunning hover effects, our slider hover box widget built into the property panel can customize the image hover effect slider however you want. To add the box hover slider, you need to know how the slider animation hover box will present your content after using the image hover effect for boxes. Our site creator will immediately reflect all slider image hover effects and box cards hover effects in the groups after applying them. For example, you will instantly see how the image hover box slider sets it in motion after you add the title.

Some developers may think it is similar to Elementor page builder image hover effects and that using hover effects of the Elementor page builder is simpler. However, it is not. Unlike the Elementor page builder that can change the background image hover effect for only one element, our creator applies the image hover effect slider for all elements within the group. To learn how to create a responsive webpage group more attractive than the Elementor page builder effect on hover over, use our additional materials templates, or experiment yourself for free.