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.

Image Settings

For overlay to work properly on responsive images, image width has to be equal to width of the image container. Otherwise the overlay will go beyond the boundary of an image.

How to adjust the width of the image container.

Increase the left and tight margins size as needed.
You can easily check dimensions of the image container with developer tools available in both Firefox and Chrome.