Overlay

Background gradient of any elements can have easily changed color, direction or start by adding its corresponding classes. The color palette is taken from material design colors.

Full screen overlay

Fullscreen overlay can be triggered with function showOverlay().


<div id="graph1"></div>

Card Image Overlay

For card image overlay use classes .card-img-overlay. The default overlay is transparent therefore if you want to make it more contrasting you can add either dark or light background

  • .overlay-dark
  • .overlay-light
.card-img-overlay
.card-img-overlay .overlay-dark
.card-img-overlay .overlay-light

<div id="graph1"></div>

Card Overlay Position

.overlay-top
.overlay-right
.overlay-bottom
.overlay-left

<div id="graph1"></div>

Custom color overlay

The background color and background alpha classes allows you to create overlay with custom color and custom opacity to match the page colors.

.red-bg .bg-alpha-4
.blue-bg .bg-alpha-4
.purple-bg .bg-alpha-4
.green-bg .bg-alpha-4

<div id="graph1"></div>

Gradient overlay

Overlay supports also gradient backgrounds.

.red-gradient
.red-gradient .to-top
.red-gradient .to-bottom
.red-gradient .to-right
.blue-gradient
.blue-gradient .to-top
.blue-gradient .to-bottom
.blue-gradient .to-right
.purple-gradient
.purple-gradient .to-top
.purple-gradient .to-bottom
.purple-gradient .to-right
.green-gradient
.green-gradient .to-top
.green-gradient .to-bottom
.green-gradient .to-right

<div id="graph1"></div>

Padding and margin

Overlays work well also with margin and padding utilities

.red-bg .bg-alpha-4 .p-5
.blue-bg .bg-alpha-4 .m-5
.purple-bg .bg-alpha-4 .m-n5

<div id="graph1"></div>