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

読了目安: 5分

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:

Click the Wix Pro Gallery in your editor.
設定をクリックします。
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.

ヒント

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.

よくある質問

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?

これは役に立ったか？

この記事では

Customizing the hover view
よくある質問

プロを雇う

あなたのサイトの目標達成をお手伝いするWixパートナーをご紹介します。

マッチング