About the Overlay Effect on Images
The overlay effect adds a semi-transparent layer on top of an image, enhancing its visual appeal and readability.
It is particularly useful for improving contrast between the background image and any text or elements placed on top of it. This effect can also add a modern, polished look to your designs.
Add Overlay on an Image Using the Hero Banner Element
Step 1: Add a Hero Banner
Drag and drop the Hero Banner element onto your page.
Click on the Hero Banner to open its Settings in the left sidebar. Choose an image for the banner background.
Step 2: Enable the Overlay Effect
In the settings, locate the Overlay section in the settings panel. Toggle the Overlay option to turn it on.
You can set the overlay to apply in the following modes:
- Normal: The overlay appears constantly over the image.
- Hover: The overlay effect is visible only when users hover over the image.
Step 4: Customize the Overlay
- Color: Choose the overlay color using the color picker. Select a shade that complements your design and ensures text readability.
- Opacity: Adjust the opacity slider to control how transparent the overlay is. Lower values make the overlay more see-through, while higher values create a stronger effect.
By using the overlay effect with the Hero Banner element, you can achieve a sleek and professional design that draws attention to key content on your page.