Image Overlay

WordPress Plugin Staff List – Image Overlay

Image overlays add a subtle level of interaction and animation to your site.

Overlay options.

You can add up to two lines of text to images overlay.
You can have the same text for all of your images or a different one for individual pictures.
Custom text formatting is available.

How to add an image overlay.

  • Go to: Template Options > Image > Animations on Hover
  • Select: Overlay.
WordPress plugin Staff List, screen of image overlay options

How to add text to all of the images.

The same text will show up on all images.
  • Go to: Template Options > Image > Overlay Options
  • Add Text 1.
  • Add optional Text 2.
  • Select font and other options..
Staff List, screen of overlay global text options

How to add text to individual images.

  • Go to: Staff Member > Images > Overlay Options
  • Add Text 1.
  • Add optional Text 2.
Staff List, screen of overlay individual text options

Overlay display rules.

  • Overlay will show up only on hyperlinked images.
  • Individual image text will overwrite the global text settings.
  • No image text – global text will show up.
  • No image text and no global text – no overlay.
  • Animations on Hover not set to Overlay – no overlay.

Overlay image margins.

Most of the time, with no overlay option, you can leave the image margins at default value. Staff member photos are centered and do not require any other adjustments.
Image margins may be required when you use image overlays.
For overlays to work properly with responsive images, image have to match the width of the image container. Otherwise, the overlay will exceed the boundary of the image.
Image overlay container dimensions
  • An image smaller than the image container. The overlay will go beyond the boundary of an image.
  • An image larger (wider) than the image container. Image is resized to fit the container. The overlay will cover the image perfectly.
  • An image the same width as the image container. The overlay will work perfectly.
In case of small images, easy way to adjust an overlay size is to add margins to the image container. You only need to change the left and right margins. The container height will always match the height of the image.

How to add margins to an image container.

Template Options > Image > Image Left/Right Margins
Adjust the left and right margins as needed.
Image overlay container container margins
You can easily check dimensions of the image container with developer tools available in both Firefox and Chrome.
How to check dimensions of the image container
p20856