Bootstrap Overlay

Create a color overlay allowing for readable text over the image or color background

How it works

Overlays are great for making a text on similar color background readable by adding a dark color as the element’s background. They’re usually used on hero sections, cards, jumbotrons, etc. Torus Kit .overlay class is applying a background-color: rgba(0, 0, 0, 0.5); by default, but it’s possible to use other Color utilities. What is great on Torus Kit .overlay is, that it blends with the background-image if it’s used on the same element as an .overlay. This is done by CSS background-blend-mode: soft-light;. Otherwise, only a background image will be visible and background color will be ignored.

Even though it’s possible to have a background-color and background-image at the same time using background-image: linear-gradient(), url(), but it’s impossible use bg-{color} utility then. So the best workaround it to use background-blend-mode and set background image and background color separately.

Example

This example shows .overlay utility class in using with article cards. Background images are placed using Background image utility.

Background Image
Background color .bg-black-50, but without .overlay class.

You can see, that black background color with 50% opacity isn't visible, because the background-image is overriding it.

Background Image
Default .overlay class together with background-image

Overlay is applied even with background-image.

Background Image
Background color .bg-primary .bg-a-80 with .overlay class together with background-image

Overlay and primary background color with 80% opacity.

<div class="row cols-flex">

  <div class="col-sm-6 col-xl-4">
    <div class="card bg-black a-50 text-white has-bg-img">
      <img src="/assets/img/img-card-02.jpg" class="bg-img" alt="Background Image">
      <div class="card-body rounded">
        <h6 class="card-title">Background color <code class="text-white">.bg-black-50</code>, but without <code class="text-white">.overlay</code> class.</h6>
        <p class="text-body-light">You can see, that black background color with 50% opacity isn't visible, because the <code class="text-white">background-image</code> is overriding it.</p>
      </div>
      <div class="card-footer border-0">
        <small>01/01/2200</small>
        <p class="card-text">John Doe</p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-xl-4">
    <div class="card overlay text-white has-bg-img">
      <img src="/assets/img/img-card-02.jpg" class="bg-img" alt="Background Image">
      <div class="card-body rounded">
        <h6 class="card-title">Default <code class="text-white">.overlay</code> class together with <code class="text-white">background-image</code></h6>
        <p class="text-body-light">Overlay is applied even with <code class="text-white">background-image</code>.</p>
      </div>
      <div class="card-footer border-0">
        <small>01/01/2200</small>
        <p class="card-text">John Doe</p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-xl-4">
    <div class="card overlay bg-primary bg-a-80 text-white has-bg-img">
      <img src="/assets/img/img-card-02.jpg" class="bg-img" alt="Background Image">
      <div class="card-body rounded">
        <h6 class="card-title">Background color <code class="text-white">.bg-primary .bg-a-80</code> with <code class="text-white">.overlay</code> class together with <code class="text-white">background-image</code></h6>
        <p class="text-body-light">Overlay and primary background color with 80% opacity.</p>
      </div>
      <div class="card-footer border-0">
        <small>01/01/2200</small>
        <p class="card-text">John Doe</p>
      </div>
    </div>
  </div>

</div>
Free

Overlay

There are two scenarios when the .overlay class can be used:

  • Overlay is applied on element with background-image together
  • Overlay is inside (wrapped) into element with background-image

In both cases, the overlay will works in the very similar way.

.overlay and background-image together

Add .overlay class to the element that has a CSS background-image applied. This is possible because the .overlay uses background-blend-mode: soft-light. You can use Torus Kit Background image to set the background image.

Element with overlay together with background image
<div class="overlay p-6 text-white" style="background-image: url(/assets/img/img-card-02.jpg)">
  Element with overlay together with background image
</div>

.overlay wrapped into element with background-image

The second way how to add an overlay is to wrap the .overlay into another element that has a CSS background-image. You can also use Torus Kit Background image to set the background image.

Overlay wrapped in element with background image
<div style="background-image: url(/assets/img/img-card-02.jpg)">
  <div class="overlay p-6 text-white">
    Overlay wrapped in element with background image
  </div>
</div>
Free

Color overlay

It’s also possible to use .overlay with the the bg-* color class.

.bg-* with .overlay and background-image together

Add .overlay together with bg-* class to the element that has a CSS background-image applied.

Primary background with 50% opacity overlay together with background image
<div class="overlay bg-primary bg-a-50 p-6 text-white" style="background-image: url(/assets/img/img-card-02.jpg)">
  Primary background with 50% opacity overlay together with background image
</div>

bg-* overlay wrapped into element with background-image

When you wrap a .bg-* background color into an element that has a background-image, you don’t need to use .overlay class. Just use a .bg-{alpha} class to set background alpha oapcity. You can also use Torus Kit Background image to set the background image on parent element.

Primary background with 50% opacity overlay wrapped into element with background image
<div style="background-image: url(/assets/img/img-card-02.jpg)">
  <div class="bg-primary bg-a-50 p-6 text-white">
    Primary background with 50% opacity overlay wrapped into element with background image
  </div>
</div>
Pro

Custom color overlay

In case that you need an overlay with background color that are not represented in bg-* classes, use data-bg-color Custom background color utility with .overlay class.

Custom data-bg-color and .overlay together with background-image

Custom background color overlay together with background image
<div class="overlay p-6 text-white bg[rgba(200,0,255,0.5)]" style="background-image: url(/assets/img/img-card-02.jpg)">
  Custom background color overlay together with background image
</div>

Custom data-bg-color wrapped into element with background-image

Custom background color overlay together with background image
<div style="background-image: url(/assets/img/img-card-02.jpg)">
  <div class="p-6 text-white bg[rgba(200,0,255,0.5)]">
    Custom background color overlay together with background image
  </div>
</div>