Wix Pro Gallery: Customizing the Hover View of Your Gallery Items | Help Center

Learn how to use Wix to build your site and business.

Design and manage your site using intuitive Wix features.

Manage subscriptions, plans and invoices.

Run your business and connect with members.

Learn to purchase, connect or transfer a domain to your site.

Get tools to grow your business and web presence.

Boost your visibility with SEO and marketing tools.

Get advanced features to help you work more efficiently.

Find solutions, learn about known issues or contact us.

Improve your skills with our courses and tutorials.

Get tips for web design, marketing and more.

Learn to increase organic site traffic from search engines.

Build a custom site using our full-stack platform.

Get matched with a specialist to help you reach your goals.

Home

Creating your site

Managing your media

Using the Pro Gallery

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

5 min

In this article

Customizing the hover view
FAQs

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.

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:

Go to your editor.
Click the pro gallery element on your page.
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.