Adjust the transparency of elements with the Opacity utility of JTB_MD. Explore customizable options to enhance visual aesthetics and create engaging user interfaces.

About

Opacity utilities, part of JTB_MD, empower you to control and enhance the transparency of elements in your web projects. With its adaptable and responsive structure, this class group offers a seamless solution for adjusting opacities with straightforward class assignments.

Within JTB_MD, the designated classbase for all opacity classes, regardless of their primary purpose, is .jtbO.

How to use

To set opacity of any element in your projects, you can simply add related JTB_MD class into it:

.jtbO-[ 0 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 ]

.jtbO-100.jtbO-90.jtbO-80.jtbO-70.jtbO-60.jtbO-50.jtbO-40.jtbO-30.jtbO-20.jtbO-10.jtbO-0

                            <!-- Element with 10% opacity -->
<span class='jtbO-10'>...</span>

Responsiveness

It is also possible to make your element's opacity behave differently based on the screen sizes of clients. To activate this utility, simply add the related screen breaker (defined in Breakpoints seciton) at the end of the corresponding class with a hyphen (-):

Refer to the table below to understand which parts of the utility group can be used with screen breakers:

Part of group	Responsiveness	Example class
All classes	Active	`.jtbO-10-xxl`