Elements:Overlays
Useful colour overlay classes so you can overlay background images or videos.
Basics
Overlays allow you to use background images or content and overlay them with a semi-transparent colour block. Use the class
.overlay
class or inline per element using the
.overlay-inline
.
Background image overlays
Background images can be applied quickly & easily using the attribute:
data-bg-img="IMAGE-PATH"
.
<div class="p-4 py-lg-8 bg-grey-dark text-center overlay overlay-op-7" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="text-uppercase fw-bold m-0 text-white">
Simple Background Overlay
</h4>
</div>Hover Overlays
You can also use overlays to show hidden content in an overlay when it's hovered.
<a href="./assets/img/projects/project-3.jpg" class="overlay-hover">
<!-- Wrapper: must have overlay-hover class -->
<img src="assets/img/projects/project-5-sm.jpg" alt="Project 5" class="img-fluid rounded" />
<!-- Background shown by default -->
<span class="overlay-hover-content">
<!-- Hover content: must have overlay-hover-content class -->
<i class="fa fa-arrow-circle-right icon-3x text-white"></i>
<h5 class="mt-4">
Conventio Esca Inhibeo Metuo Proprius
</h5>
</span>
</a>Overlay Colours
You can control the colour of the overlay using the
overlay-COLOUR
classes.
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default
</h4>
</div><div class="p-4 py-lg-5 bg-faded text-center overlay overlay-white overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-inverse">
.overlay-white
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-primary
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-info
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-success
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-warning
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-danger
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-green
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-red
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-blue
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-purple
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-pink
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-orange
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-brown
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-slate
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-olive
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-teal
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-charcoal
</h4>
</div>Overlay Opacity
You can control the strength or opacity of the overlay using the
overlay-op-(1-9)
classes, 1 (0.1) being the weakest and 9 (0.9) being the strongest.
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-dark">
White: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-dark">
White: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-dark">
White: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-dark">
White: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-dark">
White: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-dark">
White: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-dark">
White: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-dark">
White: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-dark">
White: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Primary: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Primary: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Primary: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Primary: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Primary: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Primary: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Primary: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Primary: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Primary: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Info: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Info: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Info: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Info: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Info: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Info: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Info: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Info: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Info: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Success: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Success: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Success: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Success: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Success: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Success: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Success: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Success: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Success: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Warning: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Warning: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Warning: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Warning: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Warning: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Warning: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Warning: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Warning: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Warning: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Danger: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Danger: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Danger: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Danger: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Danger: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Danger: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Danger: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Danger: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Danger: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Green: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Green: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Green: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Green: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Green: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Green: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Green: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Green: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Green: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Red: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Red: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Red: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Red: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Red: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Red: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Red: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Red: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Red: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Blue: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Blue: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Blue: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Blue: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Blue: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Blue: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Blue: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Blue: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Blue: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Purple: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Purple: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Purple: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Purple: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Purple: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Purple: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Purple: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Purple: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Purple: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Pink: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Pink: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Pink: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Pink: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Pink: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Pink: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Pink: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Pink: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Pink: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Orange: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Orange: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Orange: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Orange: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Orange: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Orange: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Orange: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Orange: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Orange: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Brown: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Brown: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Brown: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Brown: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Brown: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Brown: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Brown: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Brown: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Brown: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Slate: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Slate: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Slate: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Slate: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Slate: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Slate: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Slate: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Slate: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Slate: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Olive: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Olive: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Olive: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Olive: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Olive: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Olive: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Olive: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Olive: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Olive: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Teal: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Teal: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Teal: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Teal: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Teal: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Teal: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Teal: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Teal: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Teal: .overlay-op-9
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Charcoal: .overlay-op-1
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Charcoal: .overlay-op-2
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Charcoal: .overlay-op-3
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Charcoal: .overlay-op-4
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Charcoal: .overlay-op-5
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Charcoal: .overlay-op-6
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Charcoal: .overlay-op-7
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Charcoal: .overlay-op-8
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Charcoal: .overlay-op-9
</h4>
</div>Overlay Gradients
You can add a gradient effect to the overlay using the
overlay-gradient
or
overlay-gradient-flip
classes.
You can control the start & end colour opacity using CSS variables:
--bs-overlay-bg-gradient-start-opacity
- default 0.1
--bs-overlay-bg-gradient-end-opacity
- default 0.9
Example
style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;"
<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-faded text-center overlay overlay-gradient overlay-white overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-inverse">
.overlay-white+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-primary overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-primary+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-info overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-info+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-success overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-success+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-warning overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-warning+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-danger overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-danger+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-green overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-green+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-red overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-red+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-blue overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-blue+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-purple overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-purple+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-pink overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-pink+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-orange overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-orange+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-brown overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-brown+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-slate overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-slate+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-olive overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-olive+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-teal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-teal+overlay-gradient
</h4>
</div><div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-charcoal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-charcoal+overlay-gradient
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
Default+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-faded text-center overlay overlay-gradient-flip overlay-white overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-inverse">
.overlay-white+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-primary overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-primary+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-info overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-info+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-success overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-success+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-warning overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-warning+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-danger overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-danger+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-green overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-green+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-red overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-red+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-blue overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-blue+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-purple overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-purple+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-pink overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-pink+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-orange overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-orange+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-brown overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-brown+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-slate overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-slate+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-olive overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-olive+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-teal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-teal+overlay-gradient-flip
</h4>
</div><div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-charcoal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h4 class="fw-bold m-0 text-white">
.overlay-charcoal+overlay-gradient-flip
</h4>
</div>