Overlays are a semi-transparent layer between an image and text to make copy easier to read.
Our Overlay styles exist to be applied in both design and code and can be changed to make sure the overlay serves its purpose. This saves having to manually treat images before seeing them in the live product.
Here’s an overlay shown within a Graphic Promotion.
We have 16 Overlays, one for every type of image. See our Usage Guidelines for how to choose which one to use.
Gradient Overlays start as a percentage of black and fade to 0%.
Overlays are also available as solids, this covers the entire image.
Slightly darkens the edges of images. This draws the users eyes into the centre of the image.
We have 4 direction options – top, bottom, left, and right.
We have 3 strength options – low, medium and high.