Overlay

Bootstrap 5 Overlay component

Responsive overlay built with Bootstrap 5. Examples of overlay effect, overlay text on image, overlay image over image & more.

Basic example

Edit in sandbox 
<div class="bg-image">
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
  <div class="mask" style="background-color: rgba(0, 0, 0, 0.5)"></div>
</div>

Overlay text on image

You can overlay captions on a thumbnail image by adding some text inside the .mask layer.

Custom heading

paragraph

Edit in sandbox 
<div class="bg-image" style="max-width: 22rem;">
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
  <div class="mask text-light d-flex justify-content-center flex-column text-center" style="background-color: rgba(0, 0, 0, 0.5)">
    <h4>Custom heading</h4>
    <p class="m-0">paragraph</p>
  </div>
</div>

Overlay effect

To make overlay effect just add .hover-overlay to the image container. To see more overlay effects click here.

Louvre

Show
Edit in sandbox 
<div class="bg-image hover-overlay ripple shadow-1-strong rounded" data-mdb-ripple-color="light"
  style="max-width: 22rem;">
  <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="w-100" alt="Louvre" />
  <a href="#!">
    <div class="mask text-light d-flex justify-content-center flex-column text-center" style="background-color: rgba(0, 0, 0, 0.5)">
      <h4><i class="fas fa-search-plus"></i></h4>
      <p class="m-0">Show</p>
    </div>
  </a>
</div>

Overlay image over image

If you want overlay image over image, just put your ovarlaying image in .mask element.

Louvre
Edit in sandbox 
<div class="bg-image hover-overlay ripple shadow-1-strong rounded" data-mdb-ripple-color="light"
  style="max-width: 22rem;">
  <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="w-100" alt="Louvre" />
  <a href="#!">
    <div class="mask">
      <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/114.webp" class="w-100" />
    </div>
  </a>
</div>

Card image overlay

If you want to have card image overlay in your card component just use .card-img-overlay pattern below your image.

Stony Beach
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Edit in sandbox 
<div class="card bg-dark text-white" style="max-width: 600px;">
  <img src="https://mdbcdn.b-cdn.net/img/new/slides/017.webp" class="card-img" alt="Stony Beach"/>
  <div class="card-img-overlay" style="background-color: rgba(0, 0, 0, 0.3)">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">
      This is a wider card with supporting text below as a natural lead-in to additional
      content. This content is a little bit longer.
    </p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Overlay modal

The easiest way to get the overlay modal is just using the default bootstrap modal component.

Edit in sandbox 
<!-- Button trigger modal -->
<button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Overlay caption

To make an overlay caption just add div with .position-absolute and bottom-0 below the image and all done.

Lorem ipsum dolor sit amet.

Edit in sandbox 
<div class="bg-image" style="max-width: 22rem;">
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
  <div class="position-absolute bottom-0 text-light w-100"
    style="background-color: rgba(0, 0, 0, 0.5)">
    <p class="p-2 m-0">Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Overlay glyphicon on panel

To make overlay glyphicon on the panel just use bootstrap buttons combined with font awesome icons. Put icon inside the button and then you have a simple glyphicon.

Edit in sandbox 
<button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg btn-floating">
  <i class="fab fa-facebook-f"></i>
</button>
<button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-success btn-floating">
  <i class="fas fa-star"></i>
</button>
<button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger btn-floating">
  <i class="fas fa-magic"></i>
</button>
<button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-dark btn-floating">
  <i class="fab fa-apple"></i>
</button>