The Image Overlay block is a quick and easy way to create a cover image with a link and hover settings. Works great inside the columns block alongside other image overlay blocks but it can also be used as a wide and fullwidth block.

Examples:

Overlay Title

Overlay Subtitle

Overlay Title

Overlay Subtitle

Overlay Title

Overlay Subtitle

Overlay Title

Overlay Subtitle

Large Overlay Title

Overlay Subtitle has lots of options.

Overlay Title

Overlay Subtitle

Settings:

  • Image background
  • Link
  • Link target
  • Hover image animation (static, zoom, slide, b&w and blur)
  • Overlay color
  • Initial overlay opacity
  • Hover overlay opacity
  • Inner border color
  • Inner border width
  • Inner border opacity
  • Title and Subtitle align horizontally
  • Title and Subtitle align vertically 
  • Title
  • Title color
  • Title background (and background opacity)
  • Title size (desktop, tablet and mobile)
  • Title font-family (includes Google fonts) – font weight, font style
  • Title letter spacing
  • Title padding
  • Title margin
  • Subtitle
  • Subtitle color
  • Subtitle background (and background opacity)
  • Subtitle size (desktop, tablet and mobile)
  • Subtitle font-family (includes Google fonts) – font weight, font style
  • Subtitle letter spacing
  • Subtitle padding
  • Subtitle Margin
  • Divider
  • Divider width
  • Divider Color
  • Divider Style