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.
Hover trigger
Hover over the color above to see the change
Parent trigger
Hover over the whole card to see the change
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
classactive:
- when element gets.active
classshow:
- when element gets.show
classhover:
- when element getshover
state
And {color}
is one of the theme colors.
Hover over the elements:
<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
<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
<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 viewportactive/T:
- when.active
class is applied on parent Trigger elementshow/T:
- when.show
class is applied on parent Trigger elementhover/T:
- whenhover
state is applied on parent Trigger element
And {color}
is one of the theme colors.
Hover over the wrapper:
<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:
<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
<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:
<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
<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
<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:
<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:
<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
<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:
<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
<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
<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:
<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:
<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
<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:
<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
<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
<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:
<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:
<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
<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>
On this page