Documentation v1.1.1

Preview Purchase

Overview

Craft 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.
<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.
<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>
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now