Overlay Captions

Overlay captions provide a nice cover effect while respecting the boundaries of the photo.

Adding a caption overlay can produce some nice effects when viewing or hovering over the photo.

Example of an Overlay Caption

Adding an Overlay Caption

Overlays work by overlaying the visible image while fitting inside the image and respecting padding, drop shadows, etc.

Diagram of the Overlay

To enable an overlay, select the caption block.

Selecting the Caption Block

Make sure you have selected the Caption child block within the Photo Block. You can either click on the caption to reveal the toolbar or use the tree view to select the caption block.

We'll use the "Position" item in the toolbar to select the Overlay option.

Select Overlay From the Position Dropdown

Once you select Overlay, an adjustable overlay will appear over the image.

Example of Enabling an Overlay of the Image

Adjusting the Overlay Position

Overlay Positioning Options

With overlays enabled, you can position the overlay and caption positions within the overlay.

For example, if you'd like the caption to be at the bottom of the overlay, you can select "Bottom" from the "Overlay Vertical Position." An example is below.

Switching Caption Overlay Position

Showing the Overlay on Hover

By default, the overlay is visible without hovering over the image. However, you can choose to show it only on hover.

Showing the Overlay Only on Hover

When you display on hover, you're able to select from several animate-in options:

• Fade

• Slide Left

• Slide Right

• Slide from Bottom

• Slide from Top

A demonstration is below:

Example of Hover-only Overlays and Animation Effects

Selecting the Overlay Type

Overlay Types

You're able to select from 4 overlay types:

• None - No overlay

• Solid - Choose the overlay color and opacity

• Gradient - Choose or generate a gradient

• Image - Choose an image to overlay the main image

Solid Overlay Type

Solid Overlay Example

The Solid overlay type allows you to modify the normal and hover overlay color.

Overlay Options for the Solid Overlay

For the solid overlay, you can adjust:

• The overlay color (initial state)

• The overlay color when hovered

• The overlay border per major breakpoint

• The overlay border radius per major breakpoint

Gradient Overlay Type

You can choose a gradient to overlay the image.

Overlay Gradient Options

With the overlay gradient, you can:

• Adjust the gradient

• Generate a random gradient

• Adjust the gradient's opacity on the initial state

• Adjust the gradient's opacity on the hover state

Here's a quick demo of generating a random gradient:

Random Gradient Demo

Image Overlay Type

You can overlay an image and have it displayed initially or on hover. If done correctly, this can result in some neat effects.

Image Type for Overlays

With the image overlay, you can:

• Upload a new overlay image

• Change the background settings

• Adjust the background opacity on hover

• Adjust the background opacity on the initial view

For example, you can achieve a nice blur effect by layering a modified blurred image over the original photo. Here's a quick demo:

Demo of a Fade-in Blur Effect Overlay

Overlays and Caption Sizing

Overlays take up the full width and height of the image. However, the caption within the overlay can have its own width and height properties.

This allows you to position the caption within the overlay predictably.

For example, if we want to add an image label to the bottom right of an image, we can do that with an overlay caption. Let's work through an example.

Example of a Sized Caption Overlay

In this example, we're adding the label "Image 1 of 4" to the bottom right of the photo as an overlay.

To do so, let's follow these steps:

Step 1: Add the Caption

Add the caption label "Image 1 of 4" to the caption.

Default Overlay Caption With Custom Label

Step 2: Select None for Overlay Type

Overlay Caption With No Overlay

Selecting "None" will hide the overlay. The caption should still be visible.

Step 3: Add a Caption Background Color

Caption Background Color Sidebar Option

Find the Background Color in the caption sidebar options and change it to black.

Example of Changing the Caption Background Color

Step 4: Change the Width of the Caption

Find the sizing options in the block sidebar for the caption. Change the width to 150px.

Changing the Width of the Caption

Step 5: Change the Position of the Caption Within the Overlay

Change the Overlay's vertical position to the Bottom and the horizontal position to the Right.

Adjust the Overlay Horizontal and Veritical Positions

Step 6: Add in Some Extra Padding

The padding options are in the caption sidebar. You can adjust the caption to have more top and bottom padding.

Padding Options for the Caption Block

Conclusion

Overlay captions are powerful and customizable. We showed you how to create overlay captions and the various customization options. We also worked through an example of caption sizing within the overlay.