Customizing Hover Effects

Hover effects in Robo Gallery allow you to control how information appears over thumbnails. You can adjust animations, colors, text sources, layout structure, and even create fully custom templates.

Hover customization is available in both:

• Classic Gallery
• Fusion Gallery

Classic Gallery – Advanced Hover Customization

Go to:

THUMBS → Hover Options

1. Enable Clickable Thumbnails#

When enabled, the entire thumbnail becomes clickable. This improves usability and is recommended when linking to pages or lightbox views.

2. Choose Hover Mode#

Available modes:

• Off – disables hover
• Options – use built-in animation effects
• Template – create a custom HTML layout

3. Customize Animation Effects#

In Options mode, you can choose different animation styles:

• push-up
• push-down
• reveal-top
• reveal-bottom
• direction-aware
• direction-aware-fade
• fade

These animations control how overlay content appears and disappears.

4. Adjust Overlay Background#

You can customize:

• Background color (RGBA supported)
• Hover color
• Transparency level

Example:

rgba(7, 7, 7, 0.5)

Using semi-transparent backgrounds improves text readability.

5. Control Title & Description Appearance#

You can configure:

• Font style (Bold / Italic / Underline)
• Font size
• Line height
• Text color
• Hover color

This allows full branding alignment with your theme.

6. Use Template Mode (Full Custom Layout)#

If you need total control, switch to Template mode.

Example template:

<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>

Available variables:

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

Template mode is ideal for:

• Custom buttons
• Structured layouts
• Marketing-style overlays
• Advanced design control

Fusion Gallery – Modern Hover Customization

Go to:

THUMBS → Hover Effect

1. Choose a Hover Preset#

Fusion provides modern predefined styles:

• Lily
• Sadie
• Zoe
• Static
• Disable

These presets define animation and layout behavior automatically.

2. Select Title & Description Source#

You can choose what content appears on hover:

• Title
• Caption
• Description
• Disable

This gives flexibility depending on how your media is structured.

3. Highlight & Color Customization#

Fusion allows detailed control over:

• Hover Title Color
• Hover Description Color
• Hover Background Color
• Highlight Title Color
• Highlight Description Color
• Hover Invert option

RGBA values are supported for transparency control.

Example:

rgba(0, 0, 0, 0.71)

Mobile Optimization

Classic Gallery includes:

No Hover for Mobile → Enable

Since mobile devices do not support traditional hover interactions, disabling hover improves usability and avoids UI conflicts.

Best Practices

For better hover experience:

• Use semi-transparent backgrounds for readability
• Avoid excessive text on small thumbnails
• Match hover colors with your brand palette
• Disable hover on mobile if using complex animations
• Use Template mode only when needed

Summary

Hover customization in Robo Gallery allows you to:

• Control animations
• Adjust typography and colors
• Create custom overlay layouts
• Improve user interaction
• Maintain brand consistency

With proper configuration, hover effects can significantly enhance engagement and visual impact.