Overlays & Opacity

Overlays are used on various places. Example: using together with .bg-cover

You can set the overlay opacity using overlay-opacity-[0-9]

You can set an overlay in two ways:
1. by adding directly to main container: .overlay-dark .overlay-opacity-*
2. by adding an inside element (<span> as an example) with classes: .absolute-full .overlay-dark .overlay-opacity-*

Please note: using .absolute-full might need in some situations to add to other elements: .z-index-[1-10|99|100] and maybe in combination with .position-relative. Smarty elements do not need these classes but might be situations where you need them.

.opacity-99 - (opacity: 0.99) used as a trick only, when z-index is needed! Example: <div class="bg-light"> <svg class="z-index-n1"></svg> <div> in this case, svg is not vizible because of background color so .opacity-99 will do the trick!

Add opacity to anything: text, images, buttons, etc

.opacity-0 = opacity: 0
.opacity-1 = opacity: 0.1
.opacity-2 = opacity: 0.2
.opacity-3 = opacity: 0.3
.opacity-4 = opacity: 0.4
.opacity-5 = opacity: 0.5
.opacity-6 = opacity: 0.6
.opacity-7 = opacity: 0.7
.opacity-8 = opacity: 0.8
.opacity-9 = opacity: 0.9
.opacity-none = opacity: 1 !important