Background opacity hover colors
Background hover colors with opacity in the range from 0.1 to 0.9.
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Black
Indigo
Orange
Pink
Purple
Teal
White
<!-- Source -->
<div class="bg-hover-primary-10"></div>
<div class="bg-hover-primary-20"></div>
<div class="bg-hover-primary-30"></div>
<div class="bg-hover-primary-40"></div>
<div class="bg-hover-primary-50"></div>
<div class="bg-hover-primary-60"></div>
<div class="bg-hover-primary-70"></div>
<div class="bg-hover-primary-80"></div>
<div class="bg-hover-primary-90"></div>
<div class="bg-hover-secondary-10"></div>
<div class="bg-hover-secondary-20"></div>
<div class="bg-hover-secondary-30"></div>
<div class="bg-hover-secondary-40"></div>
<div class="bg-hover-secondary-50"></div>
<div class="bg-hover-secondary-60"></div>
<div class="bg-hover-secondary-70"></div>
<div class="bg-hover-secondary-80"></div>
<div class="bg-hover-secondary-90"></div>
<div class="bg-hover-success-10"></div>
<div class="bg-hover-success-20"></div>
<div class="bg-hover-success-30"></div>
<div class="bg-hover-success-40"></div>
<div class="bg-hover-success-50"></div>
<div class="bg-hover-success-60"></div>
<div class="bg-hover-success-70"></div>
<div class="bg-hover-success-80"></div>
<div class="bg-hover-success-90"></div>
<div class="bg-hover-info-10"></div>
<div class="bg-hover-info-20"></div>
<div class="bg-hover-info-30"></div>
<div class="bg-hover-info-40"></div>
<div class="bg-hover-info-50"></div>
<div class="bg-hover-info-60"></div>
<div class="bg-hover-info-70"></div>
<div class="bg-hover-info-80"></div>
<div class="bg-hover-info-90"></div>
<div class="bg-hover-warning-10"></div>
<div class="bg-hover-warning-20"></div>
<div class="bg-hover-warning-30"></div>
<div class="bg-hover-warning-40"></div>
<div class="bg-hover-warning-50"></div>
<div class="bg-hover-warning-60"></div>
<div class="bg-hover-warning-70"></div>
<div class="bg-hover-warning-80"></div>
<div class="bg-hover-warning-90"></div>
<div class="bg-hover-danger-10"></div>
<div class="bg-hover-danger-20"></div>
<div class="bg-hover-danger-30"></div>
<div class="bg-hover-danger-40"></div>
<div class="bg-hover-danger-50"></div>
<div class="bg-hover-danger-60"></div>
<div class="bg-hover-danger-70"></div>
<div class="bg-hover-danger-80"></div>
<div class="bg-hover-danger-90"></div>
<div class="bg-hover-light-10"></div>
<div class="bg-hover-light-20"></div>
<div class="bg-hover-light-30"></div>
<div class="bg-hover-light-40"></div>
<div class="bg-hover-light-50"></div>
<div class="bg-hover-light-60"></div>
<div class="bg-hover-light-70"></div>
<div class="bg-hover-light-80"></div>
<div class="bg-hover-light-90"></div>
<div class="bg-hover-dark-10"></div>
<div class="bg-hover-dark-20"></div>
<div class="bg-hover-dark-30"></div>
<div class="bg-hover-dark-40"></div>
<div class="bg-hover-dark-50"></div>
<div class="bg-hover-dark-60"></div>
<div class="bg-hover-dark-70"></div>
<div class="bg-hover-dark-80"></div>
<div class="bg-hover-dark-90"></div>
<div class="bg-hover-black-10"></div>
<div class="bg-hover-black-20"></div>
<div class="bg-hover-black-30"></div>
<div class="bg-hover-black-40"></div>
<div class="bg-hover-black-50"></div>
<div class="bg-hover-black-60"></div>
<div class="bg-hover-black-70"></div>
<div class="bg-hover-black-80"></div>
<div class="bg-hover-black-90"></div>
<div class="bg-hover-indigo-10"></div>
<div class="bg-hover-indigo-20"></div>
<div class="bg-hover-indigo-30"></div>
<div class="bg-hover-indigo-40"></div>
<div class="bg-hover-indigo-50"></div>
<div class="bg-hover-indigo-60"></div>
<div class="bg-hover-indigo-70"></div>
<div class="bg-hover-indigo-80"></div>
<div class="bg-hover-indigo-90"></div>
<div class="bg-hover-orange-10"></div>
<div class="bg-hover-orange-20"></div>
<div class="bg-hover-orange-30"></div>
<div class="bg-hover-orange-40"></div>
<div class="bg-hover-orange-50"></div>
<div class="bg-hover-orange-60"></div>
<div class="bg-hover-orange-70"></div>
<div class="bg-hover-orange-80"></div>
<div class="bg-hover-orange-90"></div>
<div class="bg-hover-pink-10"></div>
<div class="bg-hover-pink-20"></div>
<div class="bg-hover-pink-30"></div>
<div class="bg-hover-pink-40"></div>
<div class="bg-hover-pink-50"></div>
<div class="bg-hover-pink-60"></div>
<div class="bg-hover-pink-70"></div>
<div class="bg-hover-pink-80"></div>
<div class="bg-hover-pink-90"></div>
<div class="bg-hover-purple-10"></div>
<div class="bg-hover-purple-20"></div>
<div class="bg-hover-purple-30"></div>
<div class="bg-hover-purple-40"></div>
<div class="bg-hover-purple-50"></div>
<div class="bg-hover-purple-60"></div>
<div class="bg-hover-purple-70"></div>
<div class="bg-hover-purple-80"></div>
<div class="bg-hover-purple-90"></div>
<div class="bg-hover-teal-10"></div>
<div class="bg-hover-teal-20"></div>
<div class="bg-hover-teal-30"></div>
<div class="bg-hover-teal-40"></div>
<div class="bg-hover-teal-50"></div>
<div class="bg-hover-teal-60"></div>
<div class="bg-hover-teal-70"></div>
<div class="bg-hover-teal-80"></div>
<div class="bg-hover-teal-90"></div>
<div class="bg-hover-white-10"></div>
<div class="bg-hover-white-20"></div>
<div class="bg-hover-white-30"></div>
<div class="bg-hover-white-40"></div>
<div class="bg-hover-white-50"></div>
<div class="bg-hover-white-60"></div>
<div class="bg-hover-white-70"></div>
<div class="bg-hover-white-80"></div>
<div class="bg-hover-white-90"></div>