Overlay
An overlay is an alpha layer that is superimposed as a top layer over the content being overlayed.
Overlay
Easily add an overlay to any element by including .overlay class.
.overlay-primary
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-secondary
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-success
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-danger
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-warning
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-info
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-light
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-dark
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-alternate
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-contrast
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-darker
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
.overlay-black
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9
Gradients
You can opt to use gradients overlay by adding .gradient to any element.
The bellow sample uses .gradient-blue-purple css class to demonstrate how to used it.
you can view all gradient variations here
.alpha-1
.alpha-2
.alpha-3
.alpha-4
.alpha-5
.alpha-6
.alpha-7
.alpha-8
.alpha-9