How to Create Transparent
Overlays On Images
What are Transparent Overlays? A very common effect in web design is the use of large, often fullscreen, background images (hero images) to which you can add a transparent overlays and text elements. A variation on the transparent overlay - a color overlay - can be used to make the image blend into the overall design and color scheme of the page, and typically will make the text more readable. The Box Method It is incredibly simple to create transparent overlays in Readz. Here is how you can easily create this effect on your images in less than a minute. This method is basically the same as the div overlay method in CSS, but of course in Readz you can create these transparent/color overlays without any coding.
Here’s an example of a dark overlay over a background image, used to make the text more readable. Essentially, it's just a combination of a box element and an image element or background image. The box element is layered on top of the image. The box element’s style is a transparent color, so the image can be seen through the box. And look how easy it is to change the overlay’s color!
The key here is to size the box element to cover the entire area of the image. There’s a number of ways to do this in Readz, from clicking and dragging the width and height of the box element to match that of the image, to using the layout menu to match the size of the box element to that of the image element. Let’s look at a nifty tool in Readz to help resize our box element to the same size of the image element with very minimal effort. It’s called the Layout Toolbar. Step-by-Step Creation of Transparent Overlays Click on the Layout Toolbar tab to see the options. From the drop-down in the middle of the Layout Toolbar, select the STAR icon. This allows us to set alignment and sizing based on element to element. In our case, we are looking to match things about the image element to our box element. Once the STAR option is selected, click on your image element. Notice a star icon in the middle of the image element. This is telling us that it’s the current “chosen element”. Next, SHIFT + Left-click (COMMAND + Left-click for Mac users) the box element. Now both the image element and the box element should be selected, and the star icon still remains only on the image element (the 1st element we selected). Now, click the options in the layout toolbar that are highlighted. These options align the left sides, and equalize the size of our box element to the width and the height of our chosen element (our image element). More about the Layout Toolbar. This process should result in a transparent overlay perfectly sized over your image or image background!
How to add a cool overlay effect
Adding background image and videos
DELIVER BETTER CONTENT EXPERIENCES
Back to Menu
DELIVER BETTER EXPERIENCES
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES