Overlays | AppStrap Bootstrap Theme by Themelize.me

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" .

View code example

<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">
  <h2 class="text-uppercase font-weight-bold m-0 text-white">Simple Background Overlay</h2>
</div>

Simple Background Overlay

Hover Overlays

You can also use overlays to show hidden content in an overlay when it's hovered.

View code example

<a href="assets/img/projects/project-1.jpg" class="overlay-hover"><!-- Wrapper: must have overlay-hover class -->
  <img src="assets/img/projects/project-10-sm.jpg" alt="Project 10" class="img-fluid" /><!-- 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">Gravis Hendrerit Saluto Scisco Ullamcorper</h5>
  </span>
</a>

Fere Gilvus Nutus Torqueo Vulputate

Abico Appellatio Camur Mauris Scisco

Overlay Colours

You can control the colour of the overlay using the overlay-COLOUR classes. For colour options will be added in the near future.

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Default</h2>
</div>

Default

View code example

<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">
  <h2 class="font-weight-bold m-0 text-inverse">.overlay-white</h2>
</div>

.overlay-white

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-primary</h2>
</div>

.overlay-primary

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-info</h2>
</div>

.overlay-info

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-success</h2>
</div>

.overlay-success

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-warning</h2>
</div>

.overlay-warning

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-danger</h2>
</div>

.overlay-danger

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-green</h2>
</div>

.overlay-green

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-red</h2>
</div>

.overlay-red

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-blue</h2>
</div>

.overlay-blue

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-purple</h2>
</div>

.overlay-purple

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-pink</h2>
</div>

.overlay-pink

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-orange</h2>
</div>

.overlay-orange

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">.overlay-lime</h2>
</div>

.overlay-lime

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">.overlay-blue-dark</h2>
</div>

.overlay-blue-dark

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">.overlay-red-dark</h2>
</div>

.overlay-red-dark

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-brown</h2>
</div>

.overlay-brown

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">.overlay-cyan-dark</h2>
</div>

.overlay-cyan-dark

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">.overlay-yellow</h2>
</div>

.overlay-yellow

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-slate</h2>
</div>

.overlay-slate

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-olive</h2>
</div>

.overlay-olive

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">.overlay-teal</h2>
</div>

.overlay-teal

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">.overlay-green-bright</h2>
</div>

.overlay-green-bright

Overlay Opacity

You can control the strength or opacity of the overlay using the overlay-op-(1-9) classes, 1 being the weakest and 9 being the strongest.

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-1</h2>
</div>

Default: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-2</h2>
</div>

Default: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-3</h2>
</div>

Default: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-4</h2>
</div>

Default: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-5</h2>
</div>

Default: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-6</h2>
</div>

Default: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-7</h2>
</div>

Default: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-8</h2>
</div>

Default: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-9</h2>
</div>

Default: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">White: .overlay-op-1</h2>
</div>

White: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">White: .overlay-op-2</h2>
</div>

White: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">White: .overlay-op-3</h2>
</div>

White: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">White: .overlay-op-4</h2>
</div>

White: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">White: .overlay-op-5</h2>
</div>

White: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">White: .overlay-op-6</h2>
</div>

White: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">White: .overlay-op-7</h2>
</div>

White: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">White: .overlay-op-8</h2>
</div>

White: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">White: .overlay-op-9</h2>
</div>

White: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-1</h2>
</div>

Primary: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-2</h2>
</div>

Primary: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-3</h2>
</div>

Primary: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-4</h2>
</div>

Primary: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-5</h2>
</div>

Primary: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-6</h2>
</div>

Primary: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-7</h2>
</div>

Primary: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-8</h2>
</div>

Primary: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-9</h2>
</div>

Primary: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-1</h2>
</div>

Info: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-2</h2>
</div>

Info: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-3</h2>
</div>

Info: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-4</h2>
</div>

Info: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-5</h2>
</div>

Info: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-6</h2>
</div>

Info: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-7</h2>
</div>

Info: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-8</h2>
</div>

Info: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-9</h2>
</div>

Info: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-1</h2>
</div>

Success: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-2</h2>
</div>

Success: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-3</h2>
</div>

Success: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-4</h2>
</div>

Success: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-5</h2>
</div>

Success: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-6</h2>
</div>

Success: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-7</h2>
</div>

Success: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-8</h2>
</div>

Success: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-9</h2>
</div>

Success: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-1</h2>
</div>

Warning: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-2</h2>
</div>

Warning: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-3</h2>
</div>

Warning: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-4</h2>
</div>

Warning: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-5</h2>
</div>

Warning: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-6</h2>
</div>

Warning: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-7</h2>
</div>

Warning: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-8</h2>
</div>

Warning: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-9</h2>
</div>

Warning: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-1</h2>
</div>

Danger: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-2</h2>
</div>

Danger: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-3</h2>
</div>

Danger: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-4</h2>
</div>

Danger: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-5</h2>
</div>

Danger: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-6</h2>
</div>

Danger: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-7</h2>
</div>

Danger: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-8</h2>
</div>

Danger: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-9</h2>
</div>

Danger: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-1</h2>
</div>

Green: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-2</h2>
</div>

Green: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-3</h2>
</div>

Green: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-4</h2>
</div>

Green: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-5</h2>
</div>

Green: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-6</h2>
</div>

Green: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-7</h2>
</div>

Green: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-8</h2>
</div>

Green: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-9</h2>
</div>

Green: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-1</h2>
</div>

Red: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-2</h2>
</div>

Red: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-3</h2>
</div>

Red: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-4</h2>
</div>

Red: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-5</h2>
</div>

Red: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-6</h2>
</div>

Red: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-7</h2>
</div>

Red: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-8</h2>
</div>

Red: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-9</h2>
</div>

Red: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-1</h2>
</div>

Blue: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-2</h2>
</div>

Blue: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-3</h2>
</div>

Blue: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-4</h2>
</div>

Blue: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-5</h2>
</div>

Blue: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-6</h2>
</div>

Blue: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-7</h2>
</div>

Blue: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-8</h2>
</div>

Blue: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-9</h2>
</div>

Blue: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-1</h2>
</div>

Purple: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-2</h2>
</div>

Purple: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-3</h2>
</div>

Purple: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-4</h2>
</div>

Purple: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-5</h2>
</div>

Purple: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-6</h2>
</div>

Purple: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-7</h2>
</div>

Purple: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-8</h2>
</div>

Purple: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-9</h2>
</div>

Purple: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-1</h2>
</div>

Pink: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-2</h2>
</div>

Pink: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-3</h2>
</div>

Pink: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-4</h2>
</div>

Pink: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-5</h2>
</div>

Pink: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-6</h2>
</div>

Pink: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-7</h2>
</div>

Pink: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-8</h2>
</div>

Pink: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-9</h2>
</div>

Pink: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-1</h2>
</div>

Orange: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-2</h2>
</div>

Orange: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-3</h2>
</div>

Orange: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-4</h2>
</div>

Orange: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-5</h2>
</div>

Orange: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-6</h2>
</div>

Orange: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-7</h2>
</div>

Orange: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-8</h2>
</div>

Orange: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-9</h2>
</div>

Orange: .overlay-op-9

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-1</h2>
</div>

Lime: .overlay-op-1

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-2</h2>
</div>

Lime: .overlay-op-2

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-3</h2>
</div>

Lime: .overlay-op-3

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-4</h2>
</div>

Lime: .overlay-op-4

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-5</h2>
</div>

Lime: .overlay-op-5

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-6</h2>
</div>

Lime: .overlay-op-6

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-7</h2>
</div>

Lime: .overlay-op-7

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-8</h2>
</div>

Lime: .overlay-op-8

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-9</h2>
</div>

Lime: .overlay-op-9

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-1</h2>
</div>

Blue-dark: .overlay-op-1

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-2</h2>
</div>

Blue-dark: .overlay-op-2

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-3</h2>
</div>

Blue-dark: .overlay-op-3

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-4</h2>
</div>

Blue-dark: .overlay-op-4

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-5</h2>
</div>

Blue-dark: .overlay-op-5

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-6</h2>
</div>

Blue-dark: .overlay-op-6

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-7</h2>
</div>

Blue-dark: .overlay-op-7

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-8</h2>
</div>

Blue-dark: .overlay-op-8

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-9</h2>
</div>

Blue-dark: .overlay-op-9

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-1</h2>
</div>

Red-dark: .overlay-op-1

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-2</h2>
</div>

Red-dark: .overlay-op-2

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-3</h2>
</div>

Red-dark: .overlay-op-3

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-4</h2>
</div>

Red-dark: .overlay-op-4

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-5</h2>
</div>

Red-dark: .overlay-op-5

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-6</h2>
</div>

Red-dark: .overlay-op-6

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-7</h2>
</div>

Red-dark: .overlay-op-7

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-8</h2>
</div>

Red-dark: .overlay-op-8

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-9</h2>
</div>

Red-dark: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-1</h2>
</div>

Brown: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-2</h2>
</div>

Brown: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-3</h2>
</div>

Brown: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-4</h2>
</div>

Brown: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-5</h2>
</div>

Brown: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-6</h2>
</div>

Brown: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-7</h2>
</div>

Brown: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-8</h2>
</div>

Brown: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-9</h2>
</div>

Brown: .overlay-op-9

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-1</h2>
</div>

Cyan-dark: .overlay-op-1

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-2</h2>
</div>

Cyan-dark: .overlay-op-2

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-3</h2>
</div>

Cyan-dark: .overlay-op-3

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-4</h2>
</div>

Cyan-dark: .overlay-op-4

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-5</h2>
</div>

Cyan-dark: .overlay-op-5

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-6</h2>
</div>

Cyan-dark: .overlay-op-6

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-7</h2>
</div>

Cyan-dark: .overlay-op-7

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-8</h2>
</div>

Cyan-dark: .overlay-op-8

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-9</h2>
</div>

Cyan-dark: .overlay-op-9

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-1</h2>
</div>

Yellow: .overlay-op-1

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-2</h2>
</div>

Yellow: .overlay-op-2

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-3</h2>
</div>

Yellow: .overlay-op-3

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-4</h2>
</div>

Yellow: .overlay-op-4

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-5</h2>
</div>

Yellow: .overlay-op-5

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-6</h2>
</div>

Yellow: .overlay-op-6

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-7</h2>
</div>

Yellow: .overlay-op-7

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-8</h2>
</div>

Yellow: .overlay-op-8

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-9</h2>
</div>

Yellow: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-1</h2>
</div>

Slate: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-2</h2>
</div>

Slate: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-3</h2>
</div>

Slate: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-4</h2>
</div>

Slate: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-5</h2>
</div>

Slate: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-6</h2>
</div>

Slate: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-7</h2>
</div>

Slate: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-8</h2>
</div>

Slate: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-9</h2>
</div>

Slate: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-1</h2>
</div>

Olive: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-2</h2>
</div>

Olive: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-3</h2>
</div>

Olive: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-4</h2>
</div>

Olive: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-5</h2>
</div>

Olive: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-6</h2>
</div>

Olive: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-7</h2>
</div>

Olive: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-8</h2>
</div>

Olive: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-9</h2>
</div>

Olive: .overlay-op-9

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-1</h2>
</div>

Teal: .overlay-op-1

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-2</h2>
</div>

Teal: .overlay-op-2

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-3</h2>
</div>

Teal: .overlay-op-3

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-4</h2>
</div>

Teal: .overlay-op-4

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-5</h2>
</div>

Teal: .overlay-op-5

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-6</h2>
</div>

Teal: .overlay-op-6

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-7</h2>
</div>

Teal: .overlay-op-7

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-8</h2>
</div>

Teal: .overlay-op-8

View code example

<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">
  <h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-9</h2>
</div>

Teal: .overlay-op-9

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-1</h2>
</div>

Green-bright: .overlay-op-1

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-2</h2>
</div>

Green-bright: .overlay-op-2

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-3</h2>
</div>

Green-bright: .overlay-op-3

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-4</h2>
</div>

Green-bright: .overlay-op-4

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-5</h2>
</div>

Green-bright: .overlay-op-5

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-6</h2>
</div>

Green-bright: .overlay-op-6

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-7</h2>
</div>

Green-bright: .overlay-op-7

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-8</h2>
</div>

Green-bright: .overlay-op-8

View code example

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-9</h2>
</div>

AppStrap.

Classic Homepages

Industry/Niche Homepages

Slider Revolution

Backstretch

Flexslider

Pages

Widget Hot

37 pages of elements/snippets Updated!

Fully Optimized

Free Support

Free Upgrades

99.9% Uptime

Multiuser

Plug n play

Elements:Overlays

Basics

Background image overlays

Simple Background Overlay

Hover Overlays

Fere Gilvus Nutus Torqueo Vulputate

Abico Appellatio Camur Mauris Scisco

Overlay Colours

Default

.overlay-white

.overlay-primary

.overlay-info

.overlay-success

.overlay-warning

.overlay-danger

.overlay-green

.overlay-red

.overlay-blue

.overlay-purple

.overlay-pink

.overlay-orange

.overlay-lime

.overlay-blue-dark

.overlay-red-dark

.overlay-brown

.overlay-cyan-dark

.overlay-yellow

.overlay-slate

.overlay-olive

.overlay-teal

.overlay-green-bright

Overlay Opacity

Default: .overlay-op-1

Default: .overlay-op-2

Default: .overlay-op-3

Default: .overlay-op-4

Default: .overlay-op-5

Default: .overlay-op-6

Default: .overlay-op-7

Default: .overlay-op-8

Default: .overlay-op-9

White: .overlay-op-1

White: .overlay-op-2

White: .overlay-op-3

White: .overlay-op-4

White: .overlay-op-5

White: .overlay-op-6

White: .overlay-op-7

White: .overlay-op-8

White: .overlay-op-9

Primary: .overlay-op-1

Primary: .overlay-op-2

Primary: .overlay-op-3

Primary: .overlay-op-4

Primary: .overlay-op-5

Primary: .overlay-op-6

Primary: .overlay-op-7

Primary: .overlay-op-8

Primary: .overlay-op-9

Info: .overlay-op-1

Info: .overlay-op-2

Info: .overlay-op-3

Info: .overlay-op-4

Info: .overlay-op-5

Info: .overlay-op-6