##### Milestone 30%

##### Release 60%

- Mailbox
- Calendar
- Contacts
- Media
- Documents
- Project
- Forum
- Dashboard

# Overlay

#### Basic

To create a position context, add the `.overlay` class to a container element around an image. Add the `.overlay-panel` class to a child element to create the actual overlay panel.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Toggle Overlay On Hover

By default, the overlay is always visible. To hide the overlay and display it on hover, add the `.overlay-hover` class to the overlay container.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Overlay Background

To give the overlay a background just add the `.overlay-background` class to the overlay container.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Overlay Icon

To display an icon you can add the `.overlay-icon` class to the overlay panel.

#### Overlay Image

To apply an image as an overlay, add the `.overlay-image` class to an `<img>` element with the `.overlay-panel` class.

#### Overlay Anchor

To use the entire overlay as a link, just place an `<a>` element inside the overlay container and add the `.overlay-anchor`.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

### Overlay Positon

#### Overlay Top

#### Overlay Bottom

#### Overlay Left

#### Overlay Right

### Overlay Transition

#### Overlay Fade

Add this class to the overlay panel or image to fade it in.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Overlay Scale

Add this class to the image to scale it up.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Overlay Spin

Add this class to the image to slightly rotate it to the right.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Overlay Grayscale

Add this class to the image to desaturate it and color it on hover.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Overlay Slide Top

Add this class to the overlay panel to slide it in from the top.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Overlay Slide Bottom

Add this class to the overlay panel to slide it in from the bottom.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Overlay Slide Top

Add this class to the overlay panel to slide it in from the left.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Overlay Slide Top

Add this class to the overlay panel to slide it in from the right.

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

### More Examples

#### Animation

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

#### Vertical Align

#### Icons