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.

primary
.overlay-primary
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-secondary
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-success
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-danger
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-warning
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-info
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-light
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-dark
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-alternate
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-contrast
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-darker
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

.overlay-black
Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10

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

Overlay text

.alpha-0

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Overlay text

.alpha-10