#Programmatic Safe Bootstrap Overlays
Forked from  karbonn//Overlay-Bootstrap - simple extension for Bootstrap

Demo : http://karbonn.github.io/Overlay-Bootstrap/

## What is the difference between this version the original?
This version allows you to use frameworks or vanilla JS to enable overlays on bootstrap elements instead of relying on the ":hover" state of the original project.

## Usage

jQuery like
```
$("#jumbotron").addClass('overlayed');
```

Angular (enables overlay when scope.loading = true)
```
<div class="jumbotron" ng-class="overlayed: loading"></div>
```

## Develop
* Edit `overlay-bootstrap.css`

```
gulp
```

## What is Overlay Bootstrap? ##

Just a simple extension who add a new functionality to Bootstrap which consist to display an overlay over the Bootstrap's panel body with cool animation. No need to add new rules in a css's files, you only have to add a new class on your div!

You can also add a cool caption on your images!

## Installation ##

Add in the head of your file (after Bootstrap's file) the overlay-bootstrap.css or overlay-bootstrap.min.css.

## Functionalities ##

By default, Overlay Bootstrap contains 6 differents styles and 4 displays settings.

### Overlay: ###

**6 styles for the 6 Bootstrap's panels:**

- Default
- Primary
- Success
- Warning
- Danger
- Info

#### 4 displays settings: ####

- Top to bottom (down in Overlay Bootstrap)
- Bottom to top (up in Overlay Bootstrap)
- Left to right (left in Overlay Bootstrap)
- Right to left (right in Overlay Bootstrap)

### Caption: ###

#### 5 displays settings: ####

- Bottom to top (up in Overlay Bootstrap) 
- Top to bottom (down in Overlay Bootstrap) 
- Left to right (right in Overlay Bootstrap) 
- Right to left (left in Overlay Bootstrap)
- Half-down | half-up

### NEW: Animated Progress bars! ###

## How to use Overlay Bootstrap? ##

Overlay:
In your panel body, add a new class with the style and the animation desiring.

Caption:
In your caption's class, you only have to add an id with the effect desiring: id="caption-right" or id="caption-top".

Example:

```
    <div class="panel-body">
        <p>Example</p>
        
         An right to left primary's style overlay
        
        <div class="panel-primary-overlay-right">
            <p>Your Overlay!</p>
        </div>
    </div>
```
    
Or a top to bottom danger's style overlay
```
    <div class="panel-body">
        <p>Example 2</p>
        
        <div class="panel-danger-overlay-down">
            <p>Your Overlay!</p>
        </div>
    </div>
```
    
Caption on image

```
    <div class="thumbnail">
    
    <img src="..." alt="image"  />
```
    
For a bottom to top caption
    
```
    
        <div class="caption" id="caption-up">
        
         <h3>Thumbnail label</h3>
         <p>Some sample text. </p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               Button
            </a> 
            <a href="#" class="btn btn-default" role="button">
               Button
            </a>
         </p>
    </div>
    
    </div>
    
    <div class="thumbnail">
    <img src="..." alt="image"  />
```

For a left to right caption
    
```
   
    <div class="caption" id="caption-right">
         <h3>Thumbnail label</h3>
         <p>Some sample text. </p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               Button
            </a> 
            <a href="#" class="btn btn-default" role="button">
               Button
            </a>
         </p>
    </div>
    </div>
```
For half-up and half-down
    
    ```
        <div class="caption" id="caption-half-down">
            Overlay Down
        </div>
        <div class="caption" id="caption-half-up">
            Overlay Up
        </div>
    </div>