You can use the Box Hover Slider Effect on a Box or a Grid Cell, adding the hover interaction to your web design. For example, you can show Text over an Image on hover, like below.

hover-slide-animation.gif

See Also

More video lessons

Add Hover Slider Element

To add the Box with the Hover Slide effect, open the Add Panel -> Box and add the Hover Slider Element.

hover-slider-add-panel-box.png

Add the Hover Slider Element from the Add Panel > Slider.

hover-slider-add-panel-slider.png

Enable Hover Slide Property

To enable the Hover Slide Animation, you can do the following.

  1. Add the Box Element.
  2. Go to the Property Panel.
  3. Optionally, change its Background to the Image.
  4. Scroll down to the Animation section.
  5. Click on the Hover Slide link.
  6. Listthe item

enable-hover-slide-transition.png

Add Elements To Slides

You can add Elements to the Box and Hover Slides of the Hover Slider Element.

add-elements-hover-slider.png

Hover Slide Transition Presets

Сhoose the Presets to quickly apply the Transition Effects while switching between the Box and Hover Slides of the Hover Slider Element.

hover-slide-transition-presets.png

Fade Transition

Use the Fade Transition while switching Slides of the Hover Slider Element.

hover-slide-fade.gif

Slide Transition

You can choose the Slide Transition for the Hover Slider Element.

hover-slide-slide.gif

Flip Transition

Apply the Flip Effect for the Transition to switch to the Hover Slider Element's Hover Slide.

hover-slide-flip.gif

Wobble Transition

Select the Wobble Transition while changing to the Hover Slide.

hover-slide-wobble.gif

Zoom Transition

You can also quickly apply the Zoom Presetto set the Transition Effect for the Hover Slider Element.

hover-slide-zoom.gif

Hover Slide Properties

You can modify the Background, Transparency, and Duration for the Hover Slide Transition.

hover-slide-properties.png

Hover Slide Background

You can set the No Fill, Color, Gradient, Image, and Video as the Hover Slide Background.

Hover Slide Transparency

Modify the Hover Slide Transparency property in the Property Panel.

Transitionn Duration

You can also set the Duration of the Hove Slide Transition. The Duration can be from 0 to 10 seconds.

Preview Hover Slide Transition

You can see the Hover Slide Effect by unselecting a Box or a Grid Cell and hovering it in the Editor.

You can use the Box Hover Slider Effect on a Box or a Grid Cell, adding the hover interaction to your web design. For example, you can show Text over an Image on hover, like below. !hover-slide-animation.gif! ### <iframe style="width: 100%; aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/4RC0vQyGNWY" title="Nicepage Lesson: Box Hover Slider Effect" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> ### See Also [More video lessons](page:1318) ## Add Hover Slider Element To add the Box with the Hover Slide effect, open the Add Panel -> Box and add the Hover Slider Element. !hover-slider-add-panel-box.png! Add the Hover Slider Element from the Add Panel > Slider. !hover-slider-add-panel-slider.png! ## Enable Hover Slide Property To enable the Hover Slide Animation, you can do the following. 1. Add the Box Element. 2. Go to the Property Panel. 3. Optionally, change its Background to the Image. 4. Scroll down to the Animation section. 5. Click on the Hover Slide link. 6. Listthe item ## !enable-hover-slide-transition.png! ## Add Elements To Slides You can add Elements to the Box and Hover Slides of the Hover Slider Element. !add-elements-hover-slider.png! ## Hover Slide Transition Presets Сhoose the Presets to quickly apply the Transition Effects while switching between the Box and Hover Slides of the Hover Slider Element. !hover-slide-transition-presets.png! ### Fade Transition Use the Fade Transition while switching Slides of the Hover Slider Element. !hover-slide-fade.gif! ### Slide Transition You can choose the Slide Transition for the Hover Slider Element. !hover-slide-slide.gif! ### Flip Transition Apply the Flip Effect for the Transition to switch to the Hover Slider Element's Hover Slide. !hover-slide-flip.gif! ### Wobble Transition Select the Wobble Transition while changing to the Hover Slide. !hover-slide-wobble.gif! ### Zoom Transition You can also quickly apply the Zoom Presetto set the Transition Effect for the Hover Slider Element. !hover-slide-zoom.gif! ## Hover Slide Properties You can modify the **Background**, **Transparency**, and **Duration** for the Hover Slide Transition. !hover-slide-properties.png! ### Hover Slide Background You can set the **No Fill, Color, Gradient, Image,** and **Video** as the Hover Slide Background. ### Hover Slide Transparency Modify the Hover Slide Transparency property in the Property Panel. ###Transitionn Duration You can also set the Duration of the Hove Slide Transition. The Duration can be from 0 to 10 seconds. ## Preview Hover Slide Transition You can see the Hover Slide Effect by unselecting a Box or a Grid Cell and hovering it in the Editor. ## Related - [Animation Run On Display](page:98657) - [Animation Sync With Scroll](page:485289) - [Animation On Hover](page:197359) - [Animation On Box Hover](page:204909) - [Animation On Image Background Hover](page:204919) - [Animation Start Position](page:204913) ##