Image Overlay

Add beautiful, customizable hover text overlays with animations to your images. Hover overlays are great for galleries, portfolios or any image that would benefit from displaying information on hover.

The Image Overlay addon is available for the following SiteOrigin widgets:

  • SiteOrigin Image Widget
  • SiteOrigin Image Grid Widget
  • SiteOrigin Simple Masonry Widget

View the demos.

Requirements

To make use of this addon, go to SiteOriginPremium Addons, locate Image Overlay and click the Activate button. Next, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Image, SiteOrigin Image Grid, and SiteOrigin Simple Masonry widgets, assuming you’d like to use them all. You can also just activate the widgets you’d like to make use of.

Global Settings

To edit the Image Overlay global settings, go to SiteOriginPremium Addons, locate the Image Overlay addon and click the Settings button. There you’ll find the following settings:

Enabled widgets

Choose whether to automatically enable the image overlay for all instances of the following widgets:

  • SiteOrigin Image Widget
  • SiteOrigin Image Grid Widget
  • SiteOrigin Simple Masonry Widget

If a widget is disabled you can still manually enable the image overlay on a widget by widget basis.

Preset Themes

Optionally choose between two preset themes, Dark or Light. This will override some or all of the below global settings.

Delay before showing overlay (in milliseconds)
Set the delay after hovering before the overlay appears in milliseconds, 350 is the default.

Overlay color
Select the overlay background color, defaults to black #000000.

Overlay opacity
Select the overlay opacity, defaults to 0.8.

Overlay position
Select the overlay position, defaults to Bottom. Choose from the following options: Top, Right, Bottom or Left.

Overlay size
Enter the size of the overlay as a fraction of the image’s size. Defaults to 0.2.

Touch device show trigger
When to display the overlay on touch devices. Choose between Shown on touch and Always show.

Overlay animation
Select the overlay animation. Defaults to Fade. Choose from the following options: None, Fade, Slide or Drop.

Font family
Select the font family to be used for the overlay text. Defaults to the theme font. Choose from a list of over 900 beautiful Google Web Fonts.

Text size
Enter the text size. Defaults to 15px.

Text color
Select the text color. Defaults to white #ffffff.

Text padding
Enter the text padding for the top, right, bottom and left. Defaults to 22px.

Text position
Select the text position. Defaults to Middle. Choose between Top, Bottom or Middle.

Text alignment
Select the text alignment. Defaults to Left. Choose between Left, Right or Center.

Text animation
This is a secondary animation which will be triggered after the overlay animation finishes playing. Defaults to None. Choose from the following options: None, Left, Slide Left, Slide Right, Slide Up, Slide Down or Drop.

Widget Settings

The image title is used for the overlay text and can be inserted in two locations:

  • Media Library Image Title Field: Edit the image in the Media Libary and insert the text in the Title field provided.
  • Widget Image Title Title Field: Edit the widget used and insert the text in the Title text field provided.

If both title fields are used, the widget image title will take precedence.

The image title will be used if the widget image title field isn’t populated.

The title can also be inserted into the widget image title field. If both are used, this field will take precedence.

The SiteOrigin Image, Image Grid, and Simple Masonry widgets can be inserted into the following areas:

  • Theme Widget Areas
  • Page Builder by SiteOrigin
  • Other Supporting Page Builders: Beaver Builder, Elementor, Visual Composer
  • Block Editor: SiteOrigin Layout and SiteOrigin Widget Blocks

Once your widget has been inserted, scroll down to the bottom to locate the Image Overlay section. There you’ll find the following settings:

Near the bottom of the SiteOrigin Image, Image Grid and Simple Masonry widgets you’ll find the Image Overlay settings section.

Enable Image Overlay
Choose between Use global setting, Enabled or Disabled.

Overlay theme
Choose between Use global setting, Light or Dark. Using this setting will override some of the global overlay settings.

Quick Tour Screencast

The following screencast is a quick tour showing the Image Overlay addon used with the SiteOrigin Image widget. The process is very similar for the SiteOrigin Image Grid Widget and Simple Masonry widgets.