Summary

  • Overview
  • Enable Hover Animation For Image
  • Animation Presets
    • Zoom In Animation
    • Zoom Out Animation
    • Resize Animation
    • Slide Animation
  • Animation Properties
    • Animation Duration
    • Animation Zoom
    • Slide Direction And Distance

Overview

You can apply the Animation On Image Background Hover to the Box, Grid, Grid Repeater, and Image Gallery Elements. The Effect occurs when you hover a mouse over the Background.

animation-image-bg-hover.gif

Enable Hover Animation For Image Background

To enable the Animation On Image Background Hover, you can do the following.

  1. Add the Box Element, for example.
  2. Change its Background to Image.
  3. Select any Image,
  4. Go to the Property Panel to the right.
  5. Scroll to the Animation section.
  6. Click on the Hover Image link.
  7. On the next panel, check the Hover Animation checkbox.
  8. By default, the Zoom In Effect is applied.
  9. Test by hovering over the Box Background in the Editor.

enable-animation-image-bg-hover.png

Animation Presets

You can use the Presets to apply the Animation Effects on Image Background Hover quickly.

animation-image-bg-hover-presets.png

Zoom In Animation

Use the Zoom In Effect for the Background Image on Hover.

animation-image-bg-hover-zoom-in.gif

Zoom Out Animation

Apply the Zoom Out Effect to the Background Image on Hover.

animation-image-bg-hover-zoom-out.gif

Resize Animation

You can resize the Image Background on Hover.

animation-image-bg-hover-resize.gif

Slide Animation

You can use the Slide Animation on Image Image Background Hover. The following example shows the Slider Effect applied to the Gallery Element.

animation-image-bg-hover-slide.gif

Animation Properties

In the Property Panel, you can specify properties for the Animation On Image Background Hover Effects, including the Duration, Zoom, and Direction and Distance for the Slide Effect.

animation-image-bg-hover-properties.png

Animation Duration

You can set the Duration time for the Animation on Image Background Hover. The duration can be from 0 to 10 seconds.

animation-image-bg-hover-duration.png

Animation Zoom

Drag the slider to set the value for the Zoom effect. You can set the values from 0.25 to 10 times.

animation-image-bg-hover-zoom.png

Slide Direction And Distance

You can also set the Direction and Distance properties for the Slide Effect.

animation-image-bg-hover-direction-distance.png

## Summary - Overview - Enable Hover Animation For Image - Animation Presets - Zoom In Animation - Zoom Out Animation - Resize Animation - Slide Animation - Animation Properties - Animation Duration - Animation Zoom - Slide Direction And Distance ## Overview You can apply the **Animation On Image Background Hover** to the Box, Grid, Grid Repeater, and Image Gallery Elements. The Effect occurs when you hover a mouse over the Background. !animation-image-bg-hover.gif! ## Enable Hover Animation For Image Background To enable the **Animation On Image Background Hover**, you can do the following. 1. Add the **Box** Element, for example. 2. Change its Background to **Image**. 3. Select any Image, 4. Go to the **Property Panel** to the right. 5. Scroll to the **Animation** section. 6. Click on the **Hover Image** link. 7. On the next panel, check the **Hover Animation** checkbox. 8. By default, the **Zoom In** Effect is applied. 9. Test by hovering over the **Box Background** in the Editor. ## !enable-animation-image-bg-hover.png! ## Animation Presets You can use the Presets to apply the Animation Effects on Image Background Hover quickly. !animation-image-bg-hover-presets.png! ### Zoom In Animation Use the Zoom In Effect for the Background Image on Hover. !animation-image-bg-hover-zoom-in.gif! ### Zoom Out Animation Apply the Zoom Out Effect to the Background Image on Hover. !animation-image-bg-hover-zoom-out.gif! ### Resize Animation You can resize the Image Background on Hover. !animation-image-bg-hover-resize.gif! ### Slide Animation You can use the Slide Animation on Image Image Background Hover. The following example shows the Slider Effect applied to the Gallery Element. !animation-image-bg-hover-slide.gif! ## Animation Properties In the Property Panel, you can specify properties for the Animation On Image Background Hover Effects, including the **Duration, Zoom**, and **Direction** and **Distance** for the **Slide** Effect. !animation-image-bg-hover-properties.png! ### Animation Duration You can set the Duration time for the Animation on Image Background Hover. The duration can be from 0 to 10 seconds. !animation-image-bg-hover-duration.png! ### Animation Zoom Drag the slider to set the value for the Zoom effect. You can set the values from 0.25 to 10 times. !animation-image-bg-hover-zoom.png! ### Slide Direction And Distance You can also set the Direction and Distance properties for the Slide Effect. !animation-image-bg-hover-direction-distance.png! ##