Image Overlay

WordPress Plugin Staff List – Image Overlay

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

How to create an image overlay.

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

How to add text to an overlay.

  • Go to: Template Options > Image > Overlay Options
  • Add Text 1.
  • Add optional Text 2.
  • Select font and other options..
The same text will show on all the images.

How to add text to individual images.

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

Overlay text display rules.

  • Staff member overlay text will overwrite a template text.
  • No staff member text, template text will show up.
  • No staff member text and no template text. 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.
Change to this setting may be required only when you add image overlays.
For overlays to work properly with responsive images, image have to match the width of an image container. Otherwise the overlay will go beyond the boundary of the image.
  • An image smaller than an image container. The overlay will go beyond the boundary of an image.
  • An image larger (wider) than an image container. Image is resized to fit the container. The overlay will cover the image perfectly.
  • An image the same width as a container. The overlay will work perfectly.
Easy way to adjust an overlay size is to add margins to the image container. We need only to change the left and right margins. The container height will always match the height of an image.

How to add margins to an 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.