Overlay Styling (1:30 min)
Completion requirements
01 Getting Started
This tutorial covers the overlay, including:
- An overview of the overlay
- Color overlay of an image
02 Overview
The overlay is an important component of the strip style. It is a layer situated right about the strip background that allows you to create a color filter or an effect on top of the strip background.
03 Color Overlay of an Image
For example, if your strip has an image background.
![image fill](https://academy.titandxp.com/pluginfile.php/1944/mod_custompage/topics/69827238/1_Image.png)
1. Navigate to the Strip Styling menu.
2. Click the Overlay tab.
3. Expand the Fill drop-down and choose a fill. You can choose a color or image.
4. Use the Opacity slider to configure how transparent the fill is.
![color overlay](https://academy.titandxp.com/pluginfile.php/1944/mod_custompage/topics/69827238/2_OverlayColor.png)
5. Expand the border dropdown.
6. Choose a border color, the border weight, and radius.
![border overlay](https://academy.titandxp.com/pluginfile.php/1944/mod_custompage/topics/69827238/3_Border.png)
![image fill](https://academy.titandxp.com/pluginfile.php/1944/mod_custompage/topics/69827238/1_Image.png)
1. Navigate to the Strip Styling menu.
2. Click the Overlay tab.
3. Expand the Fill drop-down and choose a fill. You can choose a color or image.
4. Use the Opacity slider to configure how transparent the fill is.
![color overlay](https://academy.titandxp.com/pluginfile.php/1944/mod_custompage/topics/69827238/2_OverlayColor.png)
5. Expand the border dropdown.
6. Choose a border color, the border weight, and radius.
![border overlay](https://academy.titandxp.com/pluginfile.php/1944/mod_custompage/topics/69827238/3_Border.png)