Bootstrap Overlay

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

Overview

Overlays are great for making a content more readable against the light background. They’re usually used on hero sections, cards, jumbotrons, etc. Torus Kit .overlay class applies a default background-color: #000; with opacity: 0.5. You can change the default background color or create custom animated overlay on hover together with Torus Kit effects.

We’re using ::before pseudo-element to create the overlay effect. Use .overlay-content class to easily create absolute positioned content with default padding. Because .overlay-content uses display: flex, it’s easy to position content with Flex utilities.

Example

Bootstrap overlay effect example on elements using Torus Kit background image on Bootstrap cards, and custom overlay on hover using Torus Kit effects.

Overlays

Default overlay
bg
Primary overlay
bg
Gradient overlay
bg
<div class="row row-cols-3">

  <div class="col">
    <div class="overlay has-bg-img rounded h-10rem my-2">
      <div class="overlay-content align-items-end text-white">Default overlay</div>
      <img class="bg-img" src="..." alt="...">
    </div>
  </div>

  <div class="col">
    <div class="overlay overlay-primary has-bg-img rounded h-10rem my-2">
      <div class="overlay-content align-items-end text-white">Primary overlay</div>
      <img class="bg-img" src="..." alt="...">
    </div>
  </div>

  <div class="col">
    <div class="overlay-gradient has-bg-img rounded h-10rem my-2">
      <div class="overlay-content align-items-end text-white">Gradient overlay</div>
      <img class="bg-img" src="..." alt="...">
    </div>
  </div>

</div>

Card overlays

Card with default overlay

bg
Overlay

Overlay with default background color

Card with primary overlay

bg
Color overlay

Overlay with primary background color

Card with overlay hover effect

bg
Overlay on hover

Overlay with custom background color, transparency and effects

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">

  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->

  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->

  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->

</div>

Default overlay

Use .overlay class to create an overlay with default #000 background color and opacity: 0.5. Add .overlay-content class to inner content to set absolute position and default 1rem padding.

Default overlay
bg
<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

Gradient overlay

If the solid background color is not what you are looking for, use .overlay-gradient to create nice solid-transparent gradient.

Default gradient overlay
bg
<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

Color overlay

You are not limited to black overlay background color. Add .overlay-<primary|secondary|light> class to .overlay or .overlay-gradient element to set desired background color.

Solid background
Primary overlay
bg
Secondary overlay
bg
Light overlay
bg
<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>
Gradient overlay
Primary overlay
bg
Secondary overlay
bg
Light overlay
bg
<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

Overlay intensity

If the default overlay intensity (opacity) is too strong, or too light, you can change it by adding .overlay-intensity-<sm|lg> to .overlay or .overlay-gradient element. The -sm variant changes the opacity to .4, while -lg changes to .8.

Default overlay intensity

Default (black) overlay without any modifications.

With solid background
Overlay intensity small
bg
Default overlay
bg
Overlay intensity large
bg
<div class="overlay overlay-intensity-sm">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay overlay-intensity-lg">
  <div class="overlay-content">Default overlay</div>
</div>
With gradient background
Overlay intensity small
bg
Default overlay
bg
Overlay intensity large
bg
<div class="overlay-gradient overlay-intensity-sm">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay-gradient">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay-gradient overlay-intensity-lg">
  <div class="overlay-content">Default overlay</div>
</div>

Color overlay intensity

With solid background
Primary color
Overlay intensity small
bg
Default overlay
bg
Overlay intensity large
bg
Secondary color
Overlay intensity small
bg
Default overlay
bg
Overlay intensity large
bg
Light color
Overlay intensity small
bg
Default overlay
bg
Overlay intensity large
bg
<!-- Default overlay -->

<div class="overlay overlay-intensity-sm">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay overlay-intensity-lg">
  <div class="overlay-content">Default overlay</div>
</div>

<!-- Secondary overlay -->

<div class="overlay overlay-secondary overlay-intensity-sm">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-secondary overlay-intensity-lg">
  <div class="overlay-content">Secondary overlay</div>
</div>

<!-- Light overlay -->

<div class="overlay overlay-light overlay-intensity-sm">
  <div class="overlay-content">Light overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

<div class="overlay overlay-light overlay-intensity-lg">
  <div class="overlay-content">Light overlay</div>
</div>
With gradient background
Primary color
Overlay intensity small
bg
Default overlay
bg
Overlay intensity large
bg
Secondary color
Overlay intensity small
bg
Default overlay
bg
Overlay intensity large
bg
Light color
Overlay intensity small
bg
Default overlay
bg
Overlay intensity large
bg
<!-- Default overlay -->

<div class="overlay-gradient overlay-intensity-sm">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay-gradient">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay-gradient overlay-intensity-lg">
  <div class="overlay-content">Default overlay</div>
</div>

<!-- Secondary overlay -->

<div class="overlay-gradient overlay-secondary overlay-intensity-sm">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay-gradient overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay-gradient overlay-secondary overlay-intensity-lg">
  <div class="overlay-content">Secondary overlay</div>
</div>

<!-- Light overlay -->

<div class="overlay-gradient overlay-light overlay-intensity-sm">
  <div class="overlay-content">Light overlay</div>
</div>

<div class="overlay-gradient overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

<div class="overlay-gradient overlay-light overlay-intensity-lg">
  <div class="overlay-content">Light overlay</div>
</div>

Card overlay

It’s easy to set an overlay to Bootstrap card image. If your .card-img is in .card-header, just add .overlay class with .p-0 to disable the default padding.

Default overlay
Overlay card
More
Primary overlay
Overlay card
More
Light overlay
Overlay card
More
<div class="card card-clean">
  <div class="card-header overlay p-0">
    <div class="overlay-content text-white">Default overlay</div>
    <img class="card-img-top" src="...">
  </div>
  <div class="card-body">
    <h6>Overlay card</h6>
    <a href="#" class="small">More</a>
  </div>
</div>

<div class="card card-clean">
  <div class="card-header overlay overlay-primary p-0">
    <div class="overlay-content text-white">Primary overlay</div>
    <img class="card-img-top" src="...">
  </div>
  <div class="card-body">
    <h6>Overlay card</h6>
    <a href="#" class="small">More</a>
  </div>
</div>

<div class="card card-clean">
  <div class="card-header overlay overlay-light p-0">
    <div class="overlay-content">Light overlay</div>
    <img class="card-img-top" src="...">
  </div>
  <div class="card-body">
    <h6>Overlay card</h6>
    <a href="#" class="small">More</a>
  </div>
</div>

Image overlay

The main purpose of overlays is to separate the content from the background image, but keep both visible. All the examples above are used with background image. Unfortunately it’s not possible to add an .overlay to <img> directly, because ::before and ::after pseudo-elements doesn’t work on images.

But you can wrap the <img> to some wrapper element and add the .overlay class. Optionally add .img-fluid class to the image.

The second way how to add overlay above the image is to create a CSS background-image from the desired img. You can use Torus Kit Background image utility. Note, that you need to set some height explicitly to parent .overlay element, because the .bg-img gets display: none.

Overlay content on img tag

Overlay content on CSS background-image

<!-- Regular `img` tag wrapped in `.overlay` element -->
<div class="overlay">
  <div class="overlay-content">...</div>
  <img class="img-fluid" src="..." alt="">
</div>

<!-- Element with the background image -->
<div class="overlay has-bg-img h-10rem">
  <div class="overlay-content">...</div>
  <!-- This `img` will be transformed as `background-image` on the `.has-bg-img` parent element -->
  <img class="bg-img" src="..." alt="">
</div>

Overlay with hover

When you need to increase overlay intensity (opacity) on hover, add .overlay-hover class to .overlay or .overlay-gradient element.

With solid background
Default overlay
bg
Primary
bg
Light overlay
bg
<div class="overlay overlay-hover">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay overlay-hover overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-hover overlay-secondary">
  <div class="overlay-content">Light overlay</div>
</div>
With gradient background
Default gradient overlay
bg
Primary gradient overlay
bg
Light gradient overlay
bg
<div class="overlay-gradient overlay-hover">
  <div class="overlay-content">Default gradient overlay</div>
</div>

<div class="overlay-gradient overlay-hover overlay-primary">
  <div class="overlay-content">Primary gradient overlay</div>
</div>

<div class="overlay-gradient overlay-hover overlay-light">
  <div class="overlay-content">Light gradient overlay</div>
</div>

Advanced overlay effects

By using Effects feature, you can achieve complex animated overlay transitions. Here are couple of examples that uses both .overlay utility class and custom-colored overlay with a help of .bg class that automatically set width: 100%; height: 100; position: absolute; top: 0; left: 0.

Blurred background on hover
Revealed content on hover

This is a hidden content that is revealed on element hover

Custom overlay color
Clip reveal effect
Clip reveal effect
<!-- Blurred background on hover -->

<div class="overlay overlay-primary overflow-hidden has-bg-img" data-tor-parent="hover">
  <div class="overlay-content"><h6>Blurred background on hover</h6></div>
  <img class="img-fluid" src="..." data-tor="hover(p):[blur.to(xs) scale.to(125%)]" alt="">
</div>

<!-- Revealed content on hover -->

<div class="overlay overflow-hidden has-bg-img" data-tor-parent="hover">
  <div class="overlay-content">
    <div data-tor="hover(p):pull.up(full)">
      <h6 class="position-absolute" data-tor="shift.up(100%)">Revealed content on hover</h6>
      <p class="mt-3">This is a hidden content that is revealed on element hover</p>
    </div>
  </div>
  <img class="img-fluid" src="..." alt="">
</div>

<!-- Custom overlay color -->

<div class="position-relative overflow-hidden has-bg-img" data-tor-parent="hover">
  <div class="bg bg-maroon bg-opacity-30 d-flex p-3 align-items-end text-white" data-tor="hover(p):[bg(navy) bg-opacity(80%)]">
    <h6>Custom overlay color</h6>
  </div>
  <img class="img-fluid" src="..." alt="">
</div>

<!-- Clip reveal effect -->

<div class="position-relative overflow-hidden has-bg-img" data-tor-parent="hover">
  <div class="bg d-flex p-3 align-items-end">
    <h6>Clip reveal effect</h6>
    <div class="bg d-flex p-3 align-items-end z-index-1 bg-primary bg-darken-lg bg-opacity-90" data-tor="hover(p):clip(circle) slow">
      <h6>Clip reveal effect</h6>
    </div>
  </div>
  <img class="img-fluid" src="..." alt="">
</div>