Overlay

Overlay means to cover the surface of something with a coating. In other words, it is used to set one thing on the top of another. Creating an overlay effect means to put two div together at the same place.

Example Overlay

Add overlay css with background color and opacity.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione

            
              <div class="position-relative p-5" style="background-image: url('src/img-min/bg/bg-business.jpg');">
                <div class="overlay bg-gradient-primary opacity-80"></div>
                <div class="position-relative">
                  <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione</p>
                </div>
              </div>
              <div class="position-relative p-5" style="background-image: url('src/img-min/bg/bg-business.jpg');">
                <div class="overlay bg-warning opacity-80"></div>
                <div class="position-relative">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione</p>
                </div>
              </div>

Easy to change color and customize opacity

            
              <div class="overlay bg-primary opacity-80"></div>
              <div class="overlay bg-danger opacity-50"></div>
              <div class="overlay bg-warning opacity-60"></div>