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.
transparent-overlays
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!
overlays-transparent
Related Articles
How to add a cool overlay effect
Adding background image and videos
LEARN MORE
DELIVER BETTER CONTENT EXPERIENCES
web element- close
web element- menu web element- blue menu
Back to Menu
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
web element- close
DELIVER BETTER EXPERIENCES
LEARN MORE
readz logo- mobile
twitter logo
facebook logo
linkedin logo
readz logo
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
VISIT READZ.COM
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES
readz client- nonprofit readz client- health care readz client- sporting goods readz client- financial readz client- legalreadz client- technology readz client- mediareadz client- cosmetics readz client- hospitality readz client- telecommunications readz client- outdoor advertising readz client- ecommerce
label 1
Email:
SUBSCRIBE
readz logo- mobile twitter logopink twitter logofacebook logopink facebook logolinkedin logopink linkedin logo
Share:
pinterest logopink pinterest logo
USING READZ
BEST OF
LATEST