Enhanced Bootstrap Background color

Built in Background color PRO

Change the element’s background color, shading or background opacity on various triggers

Overview

Change the background color of element when these triggers has been performed: User performs hover over element, element gets .active or .show class, or element appears in the viewport and gets .inview class. You can also easily change the shading of element based on these triggers or even background color opacity by changing
its alpha channel

Examples

Examples of how to change the background color on hover. Other triggers are avialable, too.

1. Change the background color of the element that has .bg-* Background color utility class applied, by
adding data-fx="hover:bg-color--{color}" attribute to this element. Background color will change only when user hovers over that certain element.

2. Change the background color of the sinlge or multiple child elements when the trigger has been performed on parent element. Add data-fx-trigger="hover"
to indicate that this element is a parent element with the hover trigger. Than add data-fx="hover/T:bg-color--{color}" to desired child elements.

3. Change the background color even when the element has background-image applied. Use .bg-blend-*
blending mode utility class along with background image utility.

01
Hover trigger

Hover over the color above to see the change

02
Parent trigger

Hover over the whole card to see the change

Bootstrap background color hover example
02
Background image

Hover over the image to see the change

<div class="card">
  <div class="card-img-top bg-primary" data-fx="hover:bg-color--purple"></div>
  ...
</div>

<div class="card" data-fx-trigger="hover">
  <div class="card-img-top bg-navy" data-fx="hover/T:bg-color--dark"></div>
  <div class="card-body" data-fx="hover/T:bg-color--gray"></div>
</div>

<div class="card">
  <div class="card-img-top bg-maroon has-bg-img bg-blend-overlay" data-fx="hover:bg-color--purple">
    <img src="..." class="bg-img">
  </div>
  ...
</div>

Triggers

To animate the background color when {trigger} is performed on a single element, use data-fx="{trigger}:bg-color--{color} where {trigger} is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets hover state

And {color} is one of the theme colors.

Hover over the elements:

Bg color primary
Bg color secondary
Bg color success
Bg color danger
Bg color warning
Bg color info
Bg color light
Bg color dark
Bg color white
Bg color transparent
          













<div data-fx="hover:bg-color--primary">Bg color primary</div>
<div data-fx="hover:bg-color--secondary">Bg color secondary</div>
<div data-fx="hover:bg-color--success">Bg color success</div>
<div data-fx="hover:bg-color--danger">Bg color danger</div>
<div data-fx="hover:bg-color--warning">Bg color warning</div>
<div data-fx="hover:bg-color--info">Bg color info</div>
<div data-fx="hover:bg-color--light">Bg color light</div>
<div data-fx="hover:bg-color--dark">Bg color dark</div>
<div data-fx="hover:bg-color--white">Bg color white</div>
<div data-fx="hover:bg-color--transparent">Bg color transparent</div>

Click the elements to toggle .active class

Bg color primary
Bg color secondary
Bg color success
Bg color danger
Bg color warning
Bg color info
Bg color light
Bg color dark
Bg color white
Bg color transparent
          













<div data-fx="active:bg-color--primary">Bg color primary</div>
<div data-fx="active:bg-color--secondary">Bg color secondary</div>
<div data-fx="active:bg-color--success">Bg color success</div>
<div data-fx="active:bg-color--danger">Bg color danger</div>
<div data-fx="active:bg-color--warning">Bg color warning</div>
<div data-fx="active:bg-color--info">Bg color info</div>
<div data-fx="active:bg-color--light">Bg color light</div>
<div data-fx="active:bg-color--dark">Bg color dark</div>
<div data-fx="active:bg-color--white">Bg color white</div>
<div data-fx="active:bg-color--transparent">Bg color transparent</div>

Scroll into view to toggle .inview class

Bg color primary
Bg color secondary
Bg color success
Bg color danger
Bg color warning
Bg color info
Bg color light
Bg color dark
Bg color white
Bg color transparent
          













<div data-fx="inview:bg-color--primary">Bg color primary</div>
<div data-fx="inview:bg-color--secondary">Bg color secondary</div>
<div data-fx="inview:bg-color--success">Bg color success</div>
<div data-fx="inview:bg-color--danger">Bg color danger</div>
<div data-fx="inview:bg-color--warning">Bg color warning</div>
<div data-fx="inview:bg-color--info">Bg color info</div>
<div data-fx="inview:bg-color--light">Bg color light</div>
<div data-fx="inview:bg-color--dark">Bg color dark</div>
<div data-fx="inview:bg-color--white">Bg color white</div>
<div data-fx="inview:bg-color--transparent">Bg color transparent</div>

Parent triggers

To animate the background color of a single or multiple child elements when {trigger} is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover} to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.

Than add data-fx="{TRIGGER}:bg-color--{color} attribute to child elements where {TRIGGER} is:

  • inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
  • active/T: - when .active class is applied on parent Trigger element
  • show/T: - when .show class is applied on parent Trigger element
  • hover/T: - when hover state is applied on parent Trigger element

And {color} is one of the theme colors.

Hover over the wrapper:

Bg color primary
Bg color secondary
Bg color success
Bg color danger
Bg color warning
Bg color info
Bg color light
Bg color dark
Bg color white
Bg color transparent
          













<div data-fx-trigger="hover">
  <div data-fx="hover/T:bg-color--primary">Bg color primary</div>
  <div data-fx="hover/T:bg-color--secondary">Bg color secondary</div>
  <div data-fx="hover/T:bg-color--success">Bg color success</div>
  <div data-fx="hover/T:bg-color--danger">Bg color danger</div>
  <div data-fx="hover/T:bg-color--warning">Bg color warning</div>
  <div data-fx="hover/T:bg-color--info">Bg color info</div>
  <div data-fx="hover/T:bg-color--light">Bg color light</div>
  <div data-fx="hover/T:bg-color--dark">Bg color dark</div>
  <div data-fx="hover/T:bg-color--white">Bg color white</div>
  <div data-fx="hover/T:bg-color--transparent">Bg color transparent</div>
</div>

Click the wrapper to toggle .active class:

Bg color primary
Bg color secondary
Bg color success
Bg color danger
Bg color warning
Bg color info
Bg color light
Bg color dark
Bg color white
Bg color transparent
          













<div data-fx-trigger="active">
  <div data-fx="active/T:bg-color--primary">Bg color primary</div>
  <div data-fx="active/T:bg-color--secondary">Bg color secondary</div>
  <div data-fx="active/T:bg-color--success">Bg color success</div>
  <div data-fx="active/T:bg-color--danger">Bg color danger</div>
  <div data-fx="active/T:bg-color--warning">Bg color warning</div>
  <div data-fx="active/T:bg-color--info">Bg color info</div>
  <div data-fx="active/T:bg-color--light">Bg color light</div>
  <div data-fx="active/T:bg-color--dark">Bg color dark</div>
  <div data-fx="active/T:bg-color--white">Bg color white</div>
  <div data-fx="active/T:bg-color--transparent">Bg color transparent</div>
</div>

Scroll into view to toggle .inview class on parent

Bg color primary
Bg color secondary
Bg color success
Bg color danger
Bg color warning
Bg color info
Bg color light
Bg color dark
Bg color white
Bg color transparent
          













<div data-fx-trigger="inview">
  <div data-fx="inview/T:bg-color--primary">Bg color primary</div>
  <div data-fx="inview/T:bg-color--secondary">Bg color secondary</div>
  <div data-fx="inview/T:bg-color--success">Bg color success</div>
  <div data-fx="inview/T:bg-color--danger">Bg color danger</div>
  <div data-fx="inview/T:bg-color--warning">Bg color warning</div>
  <div data-fx="inview/T:bg-color--info">Bg color info</div>
  <div data-fx="inview/T:bg-color--light">Bg color light</div>
  <div data-fx="inview/T:bg-color--dark">Bg color dark</div>
  <div data-fx="inview/T:bg-color--white">Bg color white</div>
  <div data-fx="inview/T:bg-color--transparent">Bg color transparent</div>
</div>

Customizations

Modify the current background color defined by .bg-* Background color utility class by changing its lightness, darkness or opacity.

Lighten

Change the background lightness by adding data-fx="{trigger}:bg-lighten--{amount}". Where {amount} is a number from 1 to 5. You can change this amount by modifing the
$shading-levels variable.

Triggers

Use data-fx="{inview:|active:|show:|hover:}bg-lighten--{amount}" to change the background lightness of a single element.

Hover over the elements:

Bg lighten 1
Bg lighten 2
Bg lighten 3
Bg lighten 4
Bg lighten 5
          













<div class="bg-primary" data-fx="hover:bg-lighten--1">Bg lighten 1</div>
<div class="bg-primary" data-fx="hover:bg-lighten--2">Bg lighten 2</div>
<div class="bg-primary" data-fx="hover:bg-lighten--3">Bg lighten 3</div>
<div class="bg-primary" data-fx="hover:bg-lighten--4">Bg lighten 4</div>
<div class="bg-primary" data-fx="hover:bg-lighten--5">Bg lighten 5</div>

Click the elements to toggle .active class

Bg lighten 1
Bg lighten 2
Bg lighten 3
Bg lighten 4
Bg lighten 5
          













<div class="bg-primary" data-fx="active:bg-lighten--1">Bg lighten 1</div>
<div class="bg-primary" data-fx="active:bg-lighten--2">Bg lighten 2</div>
<div class="bg-primary" data-fx="active:bg-lighten--3">Bg lighten 3</div>
<div class="bg-primary" data-fx="active:bg-lighten--4">Bg lighten 4</div>
<div class="bg-primary" data-fx="active:bg-lighten--5">Bg lighten 5</div>

Scroll into view to toggle .inview class

Bg lighten 1
Bg lighten 2
Bg lighten 3
Bg lighten 4
Bg lighten 5
          













<div class="bg-primary" data-fx="inview:bg-lighten--1">Bg lighten 1</div>
<div class="bg-primary" data-fx="inview:bg-lighten--2">Bg lighten 2</div>
<div class="bg-primary" data-fx="inview:bg-lighten--3">Bg lighten 3</div>
<div class="bg-primary" data-fx="inview:bg-lighten--4">Bg lighten 4</div>
<div class="bg-primary" data-fx="inview:bg-lighten--5">Bg lighten 5</div>
Parent triggers

Use data-fx="{inview/T:|active/T:|show/T:|hover/T:}bg-lighten--{amount}" to change the background lightness of an element (elements) when a certain triggers has been performed on a parent element.

Hover over the wrapper:

Bg lighten 1
Bg lighten 2
Bg lighten 3
Bg lighten 4
Bg lighten 5
          













<div data-fx-trigger="hover">
  <div class="bg-primary" data-fx="hover/T:bg-lighten--1">Bg lighten 1</div>
  <div class="bg-primary" data-fx="hover/T:bg-lighten--2">Bg lighten 2</div>
  <div class="bg-primary" data-fx="hover/T:bg-lighten--3">Bg lighten 3</div>
  <div class="bg-primary" data-fx="hover/T:bg-lighten--4">Bg lighten 4</div>
  <div class="bg-primary" data-fx="hover/T:bg-lighten--5">Bg lighten 5</div>
</div>

Click the wrapper to toggle .active class:

Bg lighten 1
Bg lighten 2
Bg lighten 3
Bg lighten 4
Bg lighten 5
          













<div data-fx-trigger="active">
  <div class="bg-primary" data-fx="active/T:bg-lighten--1">Bg lighten 1</div>
  <div class="bg-primary" data-fx="active/T:bg-lighten--2">Bg lighten 2</div>
  <div class="bg-primary" data-fx="active/T:bg-lighten--3">Bg lighten 3</div>
  <div class="bg-primary" data-fx="active/T:bg-lighten--4">Bg lighten 4</div>
  <div class="bg-primary" data-fx="active/T:bg-lighten--5">Bg lighten 5</div>
</div>

Scroll into view to toggle .inview class on parent

Bg lighten 1
Bg lighten 2
Bg lighten 3
Bg lighten 4
Bg lighten 5
          













<div data-fx-trigger="inview">
  <div class="bg-primary" data-fx="inview/T:bg-lighten--1">Bg lighten 1</div>
  <div class="bg-primary" data-fx="inview/T:bg-lighten--2">Bg lighten 2</div>
  <div class="bg-primary" data-fx="inview/T:bg-lighten--3">Bg lighten 3</div>
  <div class="bg-primary" data-fx="inview/T:bg-lighten--4">Bg lighten 4</div>
  <div class="bg-primary" data-fx="inview/T:bg-lighten--5">Bg lighten 5</div>
</div>

Darken

Change the background darnkess by adding data-fx="{trigger}:bg-darken--{amount}". Where {amount} is a number from 1 to 5. You can change this amount by modifing the
$shading-levels variable.

Triggers

Use data-fx="{inview:|active:|show:|hover:}bg-darken--{amount}" to change the background darkness of a single element.

Hover over the elements:

Bg darken 1
Bg darken 2
Bg darken 3
Bg darken 4
Bg darken 5
          













<div class="bg-primary" data-fx="hover:bg-darken--1">Bg darken 1</div>
<div class="bg-primary" data-fx="hover:bg-darken--2">Bg darken 2</div>
<div class="bg-primary" data-fx="hover:bg-darken--3">Bg darken 3</div>
<div class="bg-primary" data-fx="hover:bg-darken--4">Bg darken 4</div>
<div class="bg-primary" data-fx="hover:bg-darken--5">Bg darken 5</div>

Click the elements to toggle .active class

Bg darken 1
Bg darken 2
Bg darken 3
Bg darken 4
Bg darken 5
          













<div class="bg-primary" data-fx="active:bg-darken--1">Bg darken 1</div>
<div class="bg-primary" data-fx="active:bg-darken--2">Bg darken 2</div>
<div class="bg-primary" data-fx="active:bg-darken--3">Bg darken 3</div>
<div class="bg-primary" data-fx="active:bg-darken--4">Bg darken 4</div>
<div class="bg-primary" data-fx="active:bg-darken--5">Bg darken 5</div>

Scroll into view to toggle .inview class

Bg darken 1
Bg darken 2
Bg darken 3
Bg darken 4
Bg darken 5
          













<div class="bg-primary" data-fx="inview:bg-darken--1">Bg darken 1</div>
<div class="bg-primary" data-fx="inview:bg-darken--2">Bg darken 2</div>
<div class="bg-primary" data-fx="inview:bg-darken--3">Bg darken 3</div>
<div class="bg-primary" data-fx="inview:bg-darken--4">Bg darken 4</div>
<div class="bg-primary" data-fx="inview:bg-darken--5">Bg darken 5</div>
Parent triggers

Use data-fx="{inview/T:|active/T:|show/T:|hover/T:}bg-darken--{amount}" to change the background darkness of an element (elements) when a certain triggers has been performed on a parent element.

Hover over the wrapper:

Bg darken 1
Bg darken 2
Bg darken 3
Bg darken 4
Bg darken 5
          













<div data-fx-trigger="hover">
  <div class="bg-primary" data-fx="hover/T:bg-darken--1">Bg darken 1</div>
  <div class="bg-primary" data-fx="hover/T:bg-darken--2">Bg darken 2</div>
  <div class="bg-primary" data-fx="hover/T:bg-darken--3">Bg darken 3</div>
  <div class="bg-primary" data-fx="hover/T:bg-darken--4">Bg darken 4</div>
  <div class="bg-primary" data-fx="hover/T:bg-darken--5">Bg darken 5</div>
</div>

Click the wrapper to toggle .active class:

Bg darken 1
Bg darken 2
Bg darken 3
Bg darken 4
Bg darken 5
          













<div data-fx-trigger="active">
  <div class="bg-primary" data-fx="active/T:bg-darken--1">Bg darken 1</div>
  <div class="bg-primary" data-fx="active/T:bg-darken--2">Bg darken 2</div>
  <div class="bg-primary" data-fx="active/T:bg-darken--3">Bg darken 3</div>
  <div class="bg-primary" data-fx="active/T:bg-darken--4">Bg darken 4</div>
  <div class="bg-primary" data-fx="active/T:bg-darken--5">Bg darken 5</div>
</div>

Scroll into view to toggle .inview class on parent

Bg darken 1
Bg darken 2
Bg darken 3
Bg darken 4
Bg darken 5
          













<div data-fx-trigger="inview">
  <div class="bg-primary" data-fx="inview/T:bg-darken--1">Bg darken 1</div>
  <div class="bg-primary" data-fx="inview/T:bg-darken--2">Bg darken 2</div>
  <div class="bg-primary" data-fx="inview/T:bg-darken--3">Bg darken 3</div>
  <div class="bg-primary" data-fx="inview/T:bg-darken--4">Bg darken 4</div>
  <div class="bg-primary" data-fx="inview/T:bg-darken--5">Bg darken 5</div>
</div>

Opacity

Change the background opacity by adding data-fx="{trigger}:bg-alpha--{amount}". This will change the alpha channel of the
background color that uses CSS hsla() function.

Triggers

Use data-fx="{inview:|active:|show:|hover:}bg-alpha--{amount}" to change the background opacity of a single element.

Hover over the elements:

Bg alpha 0
Bg alpha 5
Bg alpha 10
Bg alpha 20
Bg alpha 30
Bg alpha 40
Bg alpha 50
Bg alpha 60
Bg alpha 70
Bg alpha 80
Bg alpha 90
Bg alpha 100
          













<div class="bg-primary" data-fx="hover:bg-alpha--0">Bg alpha 0</div>
<div class="bg-primary" data-fx="hover:bg-alpha--5">Bg alpha 5</div>
<div class="bg-primary" data-fx="hover:bg-alpha--10">Bg alpha 10</div>
<div class="bg-primary" data-fx="hover:bg-alpha--20">Bg alpha 20</div>
<div class="bg-primary" data-fx="hover:bg-alpha--30">Bg alpha 30</div>
<div class="bg-primary" data-fx="hover:bg-alpha--40">Bg alpha 40</div>
<div class="bg-primary" data-fx="hover:bg-alpha--50">Bg alpha 50</div>
<div class="bg-primary" data-fx="hover:bg-alpha--60">Bg alpha 60</div>
<div class="bg-primary" data-fx="hover:bg-alpha--70">Bg alpha 70</div>
<div class="bg-primary" data-fx="hover:bg-alpha--80">Bg alpha 80</div>
<div class="bg-primary" data-fx="hover:bg-alpha--90">Bg alpha 90</div>
<div class="bg-primary" data-fx="hover:bg-alpha--100">Bg alpha 100</div>

Click the elements to toggle .active class

Bg alpha 0
Bg alpha 5
Bg alpha 10
Bg alpha 20
Bg alpha 30
Bg alpha 40
Bg alpha 50
Bg alpha 60
Bg alpha 70
Bg alpha 80
Bg alpha 90
Bg alpha 100
          













<div class="bg-primary" data-fx="active:bg-alpha--0">Bg alpha 0</div>
<div class="bg-primary" data-fx="active:bg-alpha--5">Bg alpha 5</div>
<div class="bg-primary" data-fx="active:bg-alpha--10">Bg alpha 10</div>
<div class="bg-primary" data-fx="active:bg-alpha--20">Bg alpha 20</div>
<div class="bg-primary" data-fx="active:bg-alpha--30">Bg alpha 30</div>
<div class="bg-primary" data-fx="active:bg-alpha--40">Bg alpha 40</div>
<div class="bg-primary" data-fx="active:bg-alpha--50">Bg alpha 50</div>
<div class="bg-primary" data-fx="active:bg-alpha--60">Bg alpha 60</div>
<div class="bg-primary" data-fx="active:bg-alpha--70">Bg alpha 70</div>
<div class="bg-primary" data-fx="active:bg-alpha--80">Bg alpha 80</div>
<div class="bg-primary" data-fx="active:bg-alpha--90">Bg alpha 90</div>
<div class="bg-primary" data-fx="active:bg-alpha--100">Bg alpha 100</div>

Scroll into view to toggle .inview class

Bg alpha 0
Bg alpha 5
Bg alpha 10
Bg alpha 20
Bg alpha 30
Bg alpha 40
Bg alpha 50
Bg alpha 60
Bg alpha 70
Bg alpha 80
Bg alpha 90
Bg alpha 100
          













<div class="bg-primary" data-fx="inview:bg-alpha--0">Bg alpha 0</div>
<div class="bg-primary" data-fx="inview:bg-alpha--5">Bg alpha 5</div>
<div class="bg-primary" data-fx="inview:bg-alpha--10">Bg alpha 10</div>
<div class="bg-primary" data-fx="inview:bg-alpha--20">Bg alpha 20</div>
<div class="bg-primary" data-fx="inview:bg-alpha--30">Bg alpha 30</div>
<div class="bg-primary" data-fx="inview:bg-alpha--40">Bg alpha 40</div>
<div class="bg-primary" data-fx="inview:bg-alpha--50">Bg alpha 50</div>
<div class="bg-primary" data-fx="inview:bg-alpha--60">Bg alpha 60</div>
<div class="bg-primary" data-fx="inview:bg-alpha--70">Bg alpha 70</div>
<div class="bg-primary" data-fx="inview:bg-alpha--80">Bg alpha 80</div>
<div class="bg-primary" data-fx="inview:bg-alpha--90">Bg alpha 90</div>
<div class="bg-primary" data-fx="inview:bg-alpha--100">Bg alpha 100</div>
Parent triggers

Use data-fx="{inview/T:|active/T:|show/T:|hover/T:}bg-alpha--{amount}" to change the background opacity of an element (elements) when a certain triggers has been performed on a parent element.

Hover over the wrapper:

Bg alpha 0
Bg alpha 5
Bg alpha 10
Bg alpha 20
Bg alpha 30
Bg alpha 40
Bg alpha 50
Bg alpha 60
Bg alpha 70
Bg alpha 80
Bg alpha 90
Bg alpha 100
          













<div data-fx-trigger="hover">
  <div class="bg-primary" data-fx="hover/T:bg-alpha--0">Bg alpha 0</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--5">Bg alpha 5</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--10">Bg alpha 10</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--20">Bg alpha 20</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--30">Bg alpha 30</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--40">Bg alpha 40</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--50">Bg alpha 50</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--60">Bg alpha 60</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--70">Bg alpha 70</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--80">Bg alpha 80</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--90">Bg alpha 90</div>
  <div class="bg-primary" data-fx="hover/T:bg-alpha--100">Bg alpha 100</div>
</div>

Click the wrapper to toggle .active class:

Bg alpha 0
Bg alpha 5
Bg alpha 10
Bg alpha 20
Bg alpha 30
Bg alpha 40
Bg alpha 50
Bg alpha 60
Bg alpha 70
Bg alpha 80
Bg alpha 90
Bg alpha 100
          













<div data-fx-trigger="active">
  <div class="bg-primary" data-fx="active/T:bg-alpha--0">Bg alpha 0</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--5">Bg alpha 5</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--10">Bg alpha 10</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--20">Bg alpha 20</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--30">Bg alpha 30</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--40">Bg alpha 40</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--50">Bg alpha 50</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--60">Bg alpha 60</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--70">Bg alpha 70</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--80">Bg alpha 80</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--90">Bg alpha 90</div>
  <div class="bg-primary" data-fx="active/T:bg-alpha--100">Bg alpha 100</div>
</div>

Scroll into view to toggle .inview class on parent

Bg alpha 0
Bg alpha 5
Bg alpha 10
Bg alpha 20
Bg alpha 30
Bg alpha 40
Bg alpha 50
Bg alpha 60
Bg alpha 70
Bg alpha 80
Bg alpha 90
Bg alpha 100
          













<div data-fx-trigger="inview">
  <div class="bg-primary" data-fx="inview/T:bg-alpha--0">Bg alpha 0</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--5">Bg alpha 5</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--10">Bg alpha 10</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--20">Bg alpha 20</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--30">Bg alpha 30</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--40">Bg alpha 40</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--50">Bg alpha 50</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--60">Bg alpha 60</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--70">Bg alpha 70</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--80">Bg alpha 80</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--90">Bg alpha 90</div>
  <div class="bg-primary" data-fx="inview/T:bg-alpha--100">Bg alpha 100</div>
</div>