Image Overlay

WordPress Plugin Staff List – Image Overlay

Image overlays add a subtle level of interaction and animation to your site.
You can add the same text to all images or different text to individual images.

How to Add an Image Overlay.

  • Go to: Template Options > Image > Animations on Hover
  • Select: Overlay.

How to Add Text to All 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..

How to Add Text to Individual Images.

  • Go to: Staff Member > Images > Overlay Options
  • Add Text 1.
  • Add optional Text 2.

Overlay Display Rules.

  • Overlay will show up only on hyperlinked images.
  • 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.
  • Template > Animations on Hover not set to overlay. No overlay.

Overlay Image Margins.

Most of the time 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 add image overlays.
For overlays to work properly with responsive images, images need to match the width of the image container. Otherwise, the overlay will exceed the boundary of the image.
  • 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.
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 the Image Container.

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