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.
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.
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.
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:
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
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
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:
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 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:
Add the caption label "Image 1 of 4" to the caption.
Selecting "None" will hide the overlay. The caption should still be visible.
Find the Background Color in the caption sidebar options and change it to black.
Find the sizing options in the block sidebar for the caption. Change the width to 150px.
Change the Overlay's vertical position to the Bottom and the horizontal position to the Right.
The padding options are in the caption sidebar. You can adjust the caption to have more top and bottom padding.
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.
