An image overlay is a design technique in which an image is placed on top of another element to create a layered visual effect. Image overlays help enhance aesthetics, improve text readability, and add depth to your design.
Many premium block layouts, such as Headline, Products, and About Us blocks, contain overlaying images that can make your website look genuinely unique.
This article tells you how to edit, hide, or change the overlaying media in your blocks.
Changing an overlaying image
Changing the overlaying image is similar to changing any other image on your site:
- Click the image you want to change to activate image controls.
- Click the Upload image icon and then click the Upload a file option from the drop-down menu.
- When your computer storage opens, find the image you want to upload, click it, and then click Open. In a few seconds, your image will be uploaded to the image frame.
Here’s the video of the process.
Editing overlaying images
Upon the right-click on the overlaying image, you can call out its size controls. Resize the image by dragging its corner, or drag the border control to reshape it. To move the overlaying image around the block, click the middle control and drag it to your preferred place inside the activated orange field.
Hiding overlaying images
To hide the overlaying image, click it to call out its controls and then click the Hide icon. For detailed instructions, read here.
The other way to hide the image is through the Overlaying media checkbox in the Block settings. Read more about block settings in our dedicated tutorial.