Css
utility classes

Overlay Items
The overlay items just as the name implies, are items that stay as an upper layer over other elements. The main feature of these items is that they have the capacity to spread across other elements. This can be used for blurring pages or preventing the click of a button or even as notification boxes. By default, overlay items are not given a positional layer index. This has to be set manually using the z-index property. There are two overlay utility classes available. These are the page-overlay and the overlay class. The page-overlay differs from overlay in that the former has a fixed postion while the latter has an absolute position. Whenever page-overlay class is used on an element, the element's size will spread entirely across the screen or web page but when an overlay is used, it spreads only relative to its container which is of course possible if the parent element has a relative positioning. Since these elements are transparent by nature, they are not visible unless a color is applied on them. Due to the fact that they are mostly used for pop-ups, they are mostly used with other untility classes which sets a slightly transparent background on them. These classes are the ov-l and ov-d classes which sets a white or dark transparent color on the overlay items. The ov-l classes include ov-l1, ov-l2, ov-l5 and ov-l7 classes while the ov-d classes include ov-d1, ov-d2, ov-d5 and ov-d7 classes.

Overlay Sample
  <div class="px-180 c-orange grid-center">

    <span style="margin-top:-30px"> Hello in the back </span>

    <div> class="overlay ov-d5 grid-center c-white">
        Hello in the front
    </div>
    
  </div>
In the code above, the parent div element was set at a width and height of 180 pixels and the position was set at relative. The child div that has a class of overlay will cover the entire parent div while the ov-d5 will set the overlay darkness transparency just as shown below:

Hello in the back
Hello in the front

In the code above, the "Hello in the back" stays at the back of the overlaying element while "Hello in the front" stays in the front.