An image overlay is a design technique where one image is placed on top of another element to create a layered visual effect. Overlays help strengthen the look of your site, improve text readability and add depth to your design.
Many block layouts – such as Headline, Products and About Us blocks – include overlaid images that can give your site a distinctive look. This article shows how to edit, hide or replace overlaid media in your blocks.
Replacing an overlaid image
Replacing an overlaid image works the same way as replacing any other image on your site:
- Click the image you want to replace to activate the image controls.
- Click the Upload image icon, then choose Upload a file from the dropdown menu.
- When your file browser opens, find the image, click it, then click Open. Within a few seconds the image is uploaded into the frame.
Editing overlaid images
Right-click the overlaid image to activate its resize controls. Drag a corner to resize it, or drag an edge handle to reshape it. To move the overlaid image within the block, click the centre handle and drag it where you want it, within the highlighted orange area.
Hiding overlaid images
To hide an overlaid image, click it to activate its controls, then click the Hide icon. Alternatively, untick Overlaying media in the block settings.