Adding Buttons to Hover

Hover buttons allow visitors to interact with gallery images directly from the thumbnail view. You can add:

• 🔗 Link buttons (open custom URL)
• 🔍 Zoom buttons (open lightbox)
• 🧩 Custom buttons (via hover template)

The setup differs slightly between Classic and Fusion galleries.

Classic Gallery – Link & Zoom Buttons

In Classic galleries, hover buttons are configured inside:

THUMBS → Hover Options

Step 1 — Enable Hover Mode#

Make sure:

Hover Mode → Options Clickable Thumbnails → On (optional)

Link Button Setup#

Open the Link Button tab.

You can configure:

• Show / Hide button
• Icon (Font Awesome)
• Font size
• Line height
• Border size
• Text color
• Hover color
• Background color
• Hover background color

To make it work, assign a custom link to the image inside Media Manager.

Zoom Button Setup#

Open the Zoom Button tab.

This button opens the image in the lightbox.

You can configure:

• Icon
• Size
• Colors
• Hover colors
• Border

Fusion Gallery – Buttons in Hover Template

In Fusion galleries, hover buttons are already integrated inside the hover template.

Go to:

THUMBS → Hover Effect

Fusion provides predefined hover layouts like:

• Lily
• Sadie
• Zoe
• Static
• Disable

Each template may already contain:

• Zoom icon
• Link icon
• Title
• Description

Custom Buttons in Fusion (Template Mode)#

If you need full control:

1. Enable:

Hover Mode → Template

2. Add custom HTML inside the template field.

Example:

<div class="rbs-hover-title">@TITLE@</div>
<div class="rbs-hover-caption">@CAPTION@</div>
<div class="rbs-hover-text">@DESC@</div>
<div class="rbs-hover-more">
  <a href="@LINK@" target="_blank">Read More</a>
</div>

Available placeholders:

• @TITLE@
• @CAPTION@
• @DESC@
• @LINK@
• @VIDEOLINK@

Button Styling Options (Classic)

Inside Link or Zoom button tabs you can customize:

• Icon
• Font size
• Border
• Background color
• Hover background color
• Text color
• Hover text color

Which Approach Should You Use?

Best Practice

• Use Zoom button for image galleries.
• Use Link button for portfolio or product galleries.
• Use Template mode (Fusion) when you need full design flexibility.

Now your hover overlays are not just decorative — they’re interactive.