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

You can do the following to enable the Animation On Image Background Hover.

  1. Add the Box Element, for example.
  2. Change its Background to Image.
  3. Select any Image,
  4. Go to the Property Panel.
  5. Scroll to the Animation section.
  6. Click on the Hover Image link.
  7. check the Hover Animation checkbox on the next panel.
  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

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

animation-image-bg-hover-properties.png

Animation Duration

You can set the Animation Duration on the Image Background Hover, which 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

Related

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 You can do the following to enable the Animation On Image Background Hover. 1. Add the Box Element, for example. 2. Change its Background to Image. 3. Select any Image, 4. Go to the Property Panel. 5. Scroll to the Animation section. 6. Click on the Hover Image link. 7. check the Hover Animation checkbox on the next panel. 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 You can specify the Animation On Image Background Hover Effects properties in the Property Panel, including the Duration, Zoom, Direction, and Distance for the Slide Effect. !animation-image-bg-hover-properties.png! ### Animation Duration You can set the Animation Duration on the Image Background Hover, which 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! ## 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 Start Position](page:204913) - [Box Hover Slider Effect](page:191164) ##