Simplify your workflow in minutes.
Adds a semi-transparent overlay over an element.
<div class="p-5 rounded bg-cover overlay overlay-black overlay-80 mb-5
mb-xl-0"
style="background-image:
url(../assets/img/card-photos/business-tower@2x.png);">
<div class="d-flex align-items-center justify-content-center
position-relative">
<h3 class="text-white py-9">Hello
World</h3>
</div>
</div>
<div class="p-5 rounded bg-cover overlay overlay-primary-desat overlay-50 mb-5
mb-xl-0"
style="background-image:
url(../assets/img/card-photos/business-tower@2x.png);">
<div class="d-flex align-items-center justify-content-center
position-relative">
<h3 class="text-white py-9">Hello
World</h3>
</div>
</div>
<div class="p-5 rounded bg-cover overlay overlay-danger overlay-30 mb-5
mb-xl-0"
style="background-image:
url(../assets/img/card-photos/business-tower@2x.png);">
<div class="d-flex align-items-center justify-content-center
position-relative">
<h3 class="text-white py-9">Hello
World</h3>
</div>
</div>