Wix Pro Gallery: Customizing the Hover View of Your Gallery Items

5 min read

Bring your site to life and encourage site visitors to interact with your gallery by applying fun hover effects.

A visitor sees the hover view when placing the mouse over a gallery item without clicking. You can choose which elements appear on hover, as well as how the hover effect looks.

Animation showing gallery icons, titles and descriptions appearing as the cursor is rolled over gallery items.

In this article, learn more about:

Customizing the hover view

Customize your hover view by adding an overlay, choosing what info and icons appear and applying scroll animations. Available customization options depend on the gallery layout you choose.

To customize the hover view:

Click the Wix Pro Gallery in your editor.
Click Settings.
Click the Design tab.
Choose which hover elements you want to customize:

Overlay & Icons

An overlay sits on top of an image and adds an extra effect when you hover over it with your cursor. You can customize this effect as well as any icons you have.

Click Overlay & Icons.
Choose an overlay and customize it using the options available:
- Full Overlay: The overlay covers the entire gallery item. Edit the following options:
  - Gradient: Click the toggle to enable a gradient overlay and edit its options:
    - Color & Opacity 1 and 2: Click the relevant color box to customize the gradient's colors. Then drag the slider to adjust the opacity of the colors.
    - Gradient direction: Drag the slider to adjust the gradient's overlay direction.
  - Overlay color: Click the color box to choose a color. Then drag the slider to change the transparency of the color overlay.
  - Icon color: Click the color box and select a new color for your gallery icons.
- Partial Overlay: The overlay covers only a portion of the gallery item. Edit the following options:
  - Set size in: Manage your overlay's size in percentages or pixels.
  - Size: Drag the slider or enter a value to choose an overlay size.
  - Overlay starts from: Choose where your overlay is positioned.
  - Padding: Drag the slider to adjust the amount of space between the gallery border and your overlay.
  - Gradient: Click the toggle to enable a gradient overlay and edit the options:
    - Color & Opacity 1 and 2: Click the relevant color box to customize the gradient's colors. Then drag the slider to adjust the opacity of the colors.
    - Gradient Direction: Drag the slider to adjust the gradient's overlay direction.
  - Overlay color: Click the color box to choose a color. Then drag the slider to change the transparency of the color overlay.
  - Icon color: Click the color box and select a new color for your gallery icons.
Choose an overlay effect from the options available:
- No effect: The overlay does not apply any effect.
- Fade in: The overlay gradually appears on hover.
- Expand: The overlay expands on hover.
- Slide up: The overlay slides up on hover.
- Slide right: The overlay slides right on hover.

Texts

Item Style

Scroll Animations

Screenshot showing design tab with overlay & icon options highlighted.

Tip:

While you are customizing the hover view, you can see it on the Pro Gallery in your editor. Click Exit Hover Preview to go back to the regular Pro Gallery view.

FAQs

Click a question below to learn more about customizing the hover view of your gallery.

Can I have a different image appear when hovering over a gallery item?

Can I apply a hover effect to a single gallery item?

Did this help?

In this article

Customizing the hover view
FAQs

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.

Get Matched

Customizing the hover view

To customize the hover view:

FAQs

Did this help?

Related content

Hire a Professional