How To Add A Color Overlay To Images in Image Blocks

How to Add a Color Overlay to Images in a PhotoBiz Image Block

Overview

PhotoBiz Image Blocks allow you to showcase your images in layouts that match your brand and website style. You can also add a color overlay to supported Image Block layouts to create a consistent visual effect across your images.

This guide explains how to add a color overlay to an individual image inside an Image Block. You will also learn how to adjust the overlay color, opacity, and style.

By the end of this guide, you will know how to create an image overlay using the PhotoBiz Website Builder.

Prerequisites

Before you begin, make sure you have an Image Block added to one of your website pages.

The color overlay effect works with the following Image Block layouts:

Square
Portrait
Landscape
Pinboard
Carousel
Modern Square
Modern Portrait
Modern Landscape
Gallery
Slideshow
Carousel Slideshow
Card Portrait
Card Circle
Card Portrait Overlay Right
Card Landscape Overlay Left
Card Portrait Split

STEP ONE

This opens your Website Builder, where you can access your website pages and edit your content blocks.

STEP TWO

Click the page that contains the Image Block you want to update.

Once the page opens, click directly on the Image Block you want to edit. This will open the Image Block settings in the right-side menu.

STEP THREE

In the right-side menu, click the image thumbnail you want to add a color overlay to.

This opens the settings for that individual image. The overlay effect is applied at the image level, so you can choose which images in the block should use the effect.

STEP FOUR

Scroll down to the TITLE section for the image.

To display text over the image, enter the title you want visitors to see. To add the overlay effect without showing a visible title, type into the title field.

After entering your title or spacer text, click SAVE CHANGES at the bottom of the right-side menu.

STEP FIVE

Click the COLORS tab in the right-side menu.

Under OVERLAY COLOR, choose the color you want to use for the image overlay. This color will appear over the image once the overlay is active.

Click SAVE CHANGES to apply the overlay color.

FINAL STEP

Click the STYLING tab in the right-side menu.

Use the overlay opacity percentage to adjust how strong or subtle the overlay appears on the image. You can set the overlay opacity from 0% to 100%. A lower percentage makes the overlay more transparent, while a higher percentage makes the overlay more visible.

You can also adjust the OVERLAY STYLE. Choose Solid, Border, or Gradient depending on the look you want for the image overlay.

Once your changes are saved, your image will display with the selected overlay color, opacity, and overlay style.

Additional Options and Helpful Notes

The color overlay is useful when you want to create a consistent look across several images or make title text easier to read over a photo.

You can use a title if you want text to appear over the image. You can also use in the title field if you want the overlay effect without displaying text.

Under STYLING, you can control both the overlay opacity and overlay style. Opacity controls how visible the overlay is, and overlay style controls whether the effect appears as Solid, Border, or Gradient.

Overlay settings may appear differently depending on the image, selected color, opacity level, overlay style, and Image Block layout. Preview your website after saving to make sure the overlay matches the look you want.

0 Comments

Previous Post Next Post

How To Use Image Blocks

March 6, 2026

How To Add Titles & Captions To Individual Images

May 5, 2025

How To Change Image Block Layout

November 21, 2025

How Can I Get My Page To Display More Images?

November 20, 2024