AppStrap.

Useful colour overlay classes so you can overlay background images or videos.

Basics

Overlays allow you to use background images or content and overlay them with a semi-transparent colour block. Use the class .overlay class or inline per element using the .overlay-inline .

Background image overlays

Background images can be applied quickly & easily using the attribute: data-bg-img="IMAGE-PATH" .

View code example

 
Simple Background Overlay
 

Hover Overlays

You can also use overlays to show hidden content in an overlay when it's hovered.

View code example

    
Abico Bene Esse Scisco Venio
  

---

Overlay Colours

You can control the colour of the overlay using the overlay-COLOUR classes. For colour options will be added in the near future.

View code example

 
Default
 

View code example

 
.overlay-white
 

View code example

 
.overlay-primary
 

---

Overlay Opacity

You can control the strength or opacity of the overlay using the overlay-op-(1-9) classes, 1 being the weakest and 9 being the strongest.

View code example

 
Default: .overlay-op-1
 

View code example

 
Default: .overlay-op-2
 

View code example

 
Default: .overlay-op-3
 

View code example

 
Default: .overlay-op-4
 

View code example

 
Default: .overlay-op-5
 

View code example

 
Default: .overlay-op-6
 

View code example

 
Default: .overlay-op-7
 

View code example

 
Default: .overlay-op-8
 

View code example

 
Default: .overlay-op-9
 

---

View code example

 
White: .overlay-op-1
 

View code example

 
White: .overlay-op-2
 

View code example

 
White: .overlay-op-3
 

View code example

 
White: .overlay-op-4
 

View code example

 
White: .overlay-op-5
 

View code example

 
White: .overlay-op-6
 

View code example

 
White: .overlay-op-7
 

View code example

 
White: .overlay-op-8
 

View code example

 
White: .overlay-op-9
 

---

View code example

 
Primary: .overlay-op-1
 

View code example

 
Primary: .overlay-op-2
 

View code example

 
Primary: .overlay-op-3
 

View code example

 
Primary: .overlay-op-4
 

View code example

 
Primary: .overlay-op-5
 

View code example

 
Primary: .overlay-op-6
 

View code example

 
Primary: .overlay-op-7
 

View code example

 
Primary: .overlay-op-8
 

View code example

 
Primary: .overlay-op-9