Documentation v8.1.1

Preview Downloads Purchase

Overview

Metronic sets custom opacity classes in src/sass/components/helpers/_opacity.scssand through a SASS variable $opacity-valuesdefined in src/sass/components/_variables.scssto provide additional opacity utility classes to cover its own design system.

Opacity

Use the .opacity-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }class to set an element's opacity style.

.opacity-0

.opacity-5

.opacity-10

.opacity-15

.opacity-20

.opacity-25

.opacity-50

.opacity-75

.opacity-100

<div class="opacity-0"></div>
<div class="opacity-5"></div>
<div class="opacity-10"></div>
<div class="opacity-15"></div>
<div class="opacity-20"></div>
<div class="opacity-25"></div>
<div class="opacity-50"></div>
<div class="opacity-75"></div>
<div class="opacity-100"></div>

Opacity Hover Effects

Use .opacity-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }-hoverto display an element's opacity on hover.

.opacity-0-hover

.opacity-5-hover

.opacity-10-hover

.opacity-15-hover

.opacity-20-hover

.opacity-25-hover

.opacity-50-hover

.opacity-75-hover

.opacity-100-hover

<div class="opacity-0-hover"></div>
<div class="opacity-5-hover"></div>
<div class="opacity-10-hover"></div>
<div class="opacity-15-hover"></div>
<div class="opacity-20-hover"></div>
<div class="opacity-25-hover"></div>
<div class="opacity-50-hover"></div>
<div class="opacity-75-hover"></div>
<div class="opacity-100-hover"></div>

Opacity Active State

Use .opacity-active-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }to set an element's opacity on active states. Click on the demo below to trigger the active state.

.opacity-active-0

.opacity-active-5

.opacity-active-10

.opacity-active-15

.opacity-active-20

.opacity-active-25

.opacity-active-50

.opacity-active-75

.opacity-active-100

<div class="opacity-active-0"></div>
<div class="opacity-active-5"></div>
<div class="opacity-active-10"></div>
<div class="opacity-active-15"></div>
<div class="opacity-active-20"></div>
<div class="opacity-active-25"></div>
<div class="opacity-active-50"></div>
<div class="opacity-active-75"></div>
<div class="opacity-active-100"></div>

Opacity Combined Active & Hover State

Use .opacity-state-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }to set an element's opacity on both active and hover states. Click on the demo below to trigger the active state.

.opacity-state-0

.opacity-state-5

.opacity-state-10

.opacity-state-15

.opacity-state-20

.opacity-state-25

.opacity-state-50

.opacity-state-75

.opacity-state-100

<div class="opacity-state-0"></div>
<div class="opacity-state-5"></div>
<div class="opacity-state-10"></div>
<div class="opacity-state-15"></div>
<div class="opacity-state-20"></div>
<div class="opacity-state-25"></div>
<div class="opacity-state-50"></div>
<div class="opacity-state-75"></div>
<div class="opacity-state-100"></div>