Skip to content

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-29-sm.jpg" alt="Project 29" 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">Erat Nimis Odio Pagus Paulatim</h5>
  </span>
</a>

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


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

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.