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>