Transparent & Overlay Hover

Transparent and overlay hover effects allow you to display image titles, descriptions, and buttons over thumbnails with a semi-transparent background.

This effect improves readability while keeping the image visible underneath.

Robo Gallery supports overlay styling in both:

• Classic Gallery
• Fusion Gallery

Classic Gallery – Transparent Hover Setup

Go to:

THUMBS → Hover Options

Make sure:

Hover Mode → Options

Step 1 — Set Background Overlay Color#

Adjust:

Bg Color

Example:

rgba(0, 0, 0, 0.5)

This creates a dark transparent overlay.

The last value in rgba() controls transparency:

• 0 = fully transparent
• 1 = solid color
• 0.4–0.7 = recommended overlay range

Step 2 — Customize Hover Colors#

Under Text colors and Highlight options, configure:

• Hover Title Color
• Hover Description Color
• Hover Background Color
• Highlight Title
• Highlight Description

Creating a Light Overlay#

Example:

rgba(255, 255, 255, 0.6)

This produces a soft white overlay.

Best used with dark text colors.

Fusion Gallery – Overlay Hover Styling

Go to:

THUMBS → Hover Effect

Fusion templates like:

• Lily
• Sadie
• Zoe

already include overlay effects.

Adjust Background Transparency#

Inside:

Highlight options

and

Text colors

you can modify:

• Hover Background Color
• Highlight Title
• Highlight Description
• Text opacity

Example dark overlay:

rgba(0, 0, 0, 0.71)

Example light overlay:

rgba(255, 255, 255, 0.67)

Hover Invert Option

You can enable:

Hover Invert → Enable

This switches text/background contrast for stronger visual emphasis.

Mobile Considerations

In Classic:

No Hover for Mobile → On

Hover effects can be disabled for mobile devices where hover interaction is limited.

Best Overlay Combinations

Dark Theme Overlay#

• Bg Color: rgba(0, 0, 0, 0.6)
• Title: #ffffff
• Description: #dddddd

Light Theme Overlay#

• Bg Color: rgba(255, 255, 255, 0.6)
• Title: #000000
• Description: #333333

Transparent vs Solid Hover

When to Use Overlay Hover

• Portfolio galleries
• Product showcases
• Travel galleries
• Editorial layouts

Overlay hover keeps the layout clean while providing contextual information on interaction.

Transparent hover effects give your gallery a modern and professional look without overwhelming the visual content.