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