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



<div id="graph1"></div>
Card Overlay Position




<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.




<div id="graph1"></div>
Gradient overlay
Overlay supports also gradient backgrounds.
















<div id="graph1"></div>
Padding and margin
Overlays work well also with margin and padding utilities



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