# Overlay This component is used to create a image overlay. ## Usage First, you must create a position context by adding the ```.inline-box``` class to a ```
``` element. Inside, place your image and create a ```
``` element with the ```overlay``` class. Then, add a position class, as in the example below (see [Utility component](utility.md#position)).
Example
```html
``` ----------- ## Full size To display the full size overlay, add the ```.fullsize``` class.
Example
```html
``` ----------- ## Inverse To reverse the color of the overlay and switch from dark to light, add the ```.overlay-inverse``` class.
Inverse
```html
``` ----------- ## Content You can add content directly to the overlay. You can also use [position classes](utility.md#position) to align your content.
Center
Top
```html
Center
Top right
``` -----------