Hover Templates

The Hover Template option allows you to fully customize the content displayed when users hover over gallery thumbnails.

This feature is available only in the Classic Grid gallery inside the Hover Options panel.

Where to Find Hover Template#

Open your gallery and navigate to:

Options → Hover Options → Hover Mode

Set Hover Mode to:

Template

This enables the Hover Template editor, where you can define the layout and content of the hover overlay.

Available Template Variables#

You can insert dynamic content into the hover template using special placeholders.

Available variables:

Example Hover Template#

Example template used in many galleries:

<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@">Read more</a>
</div>

This layout will display:

• image title
• caption
• description
• link button

Customizing the Layout#

Because the hover template uses HTML, you can fully control the structure and styling.

For example, you can:

• remove elements you don’t need
• change button text
• reorder elements
• apply custom CSS classes

Example simplified template:

<div class="rbs-hover-title">@TITLE@</div>

This will display only the image title on hover.

Styling the Hover Template#

To customize the appearance, you can use Custom CSS.

Example:

.rbs-hover-title {
    font-size: 18px;
    font-weight: bold;
}

.rbs-hover-caption {
    font-size: 14px;
    opacity: 0.8;
}

This allows you to match the hover design with your website theme.

Tips#

• Keep hover content short and readable.
• Avoid adding too many elements inside the hover template.
• Use CSS to control layout and spacing.

Hover templates are especially useful for portfolio galleries, product galleries, and image collections where additional information is important.