Overlay Captions

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

Adding an Overlay Caption

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

To enable an overlay, select 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.

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

Adjusting the Overlay Position

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.

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.

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:

Selecting the Overlay Type

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

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

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.

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:

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.

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:

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.

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.

Step 2: Select None for Overlay Type

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

Step 3: Add a Caption Background Color

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

Step 4: Change the Width of the Caption

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

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.

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.

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.