Basic
Use
.overlay on an element and wrap the element's primary content with .overlay-wrapper and the overlay content with .overlay-layer
and set the overlay backgroud color with opacity with .bg-white .bg-opacity-5:
<div class="row">
<div class="col-lg-4">
<!--begin::Card-->
<div class="card overlay overflow-hidden">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="assets/media/stock/600x400/img-1.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer bg-dark bg-opacity-25">
<a href="#" class="btn btn-primary btn-shadow">Explore</a>
<a href="#" class="btn btn-light-primary btn-shadow ms-2">Purchase</a>
</div>
</div>
</div>
<!--end::Card-->
</div>
<div class="col-lg-4">
<!--begin::Card-->
<div class="card overlay overflow-hidden">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="assets/media/stock/600x400/img-2.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer bg-dark bg-opacity-25 align-items-end justify-content-center">
<div class="d-flex flex-grow-1 flex-center py-5">
<a href="#" class="btn btn-primary btn-shadow">Explore</a>
<a href="#" class="btn btn-light-primary btn-shadow ms-2">Purchase</a>
</div>
</div>
</div>
</div>
<!--end::Card-->
</div>
<div class="col-lg-4">
<!--begin::Card-->
<div class="card overlay overflow-hidden">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="assets/media/stock/600x400/img-3.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer bg-dark bg-opacity-25 align-items-start justify-content-center">
<div class="d-flex flex-grow-1 flex-center py-5">
<a href="#" class="btn btn-primary btn-shadow">Explore</a>
<a href="#" class="btn btn-light-primary btn-shadow ms-2">Purchase</a>
</div>
</div>
</div>
</div>
<!--end::Card-->
</div>
</div>Default Shown
Use
.overlay-block on an element to display its overlay content by default:
<div class="row">
<div class="col-lg-4">
<!--begin::Card-->
<div class="card overlay overlay-block">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="assets/media/stock/600x400/img-1.jpg" alt="" class="w-100 card-rounded"/>
</div>
<div class="overlay-layer card-rounded bg-dark bg-opacity-25">
<a href="#" class="btn btn-primary btn-shadow">Explore</a>
<a href="#" class="btn btn-light-primary btn-shadow ms-2">Purchase</a>
</div>
</div>
</div>
<!--end::Card-->
</div>
<div class="col-lg-4">
<!--begin::Card-->
<div class="card overlay overflow-hidden">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="assets/media/stock/600x400/img-2.jpg" alt="" class="w-100 card-rounded"/>
</div>
<div class="overlay-layer card-rounded bg-dark bg-opacity-25 align-items-end justify-content-center">
<div class="d-flex flex-grow-1 flex-center py-5">
<a href="#" class="btn btn-primary btn-shadow">Explore</a>
<a href="#" class="btn btn-light-primary btn-shadow ms-2">Purchase</a>
</div>
</div>
</div>
</div>
<!--end::Card-->
</div>
<div class="col-lg-4">
<!--begin::Card-->
<div class="card overlay overflow-hidden">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="assets/media/stock/600x400/img-3.jpg" alt="" class="w-100 card-rounded"/>
</div>
<div class="overlay-layer card-rounded bg-dark bg-opacity-25 align-items-start justify-content-center">
<div class="d-flex flex-grow-1 flex-center py-5">
<a href="#" class="btn btn-primary btn-shadow">Explore</a>
<a href="#" class="btn btn-light-primary btn-shadow ms-2">Purchase</a>
</div>
</div>
</div>
</div>
<!--end::Card-->
</div>
</div>Content Blocking
Use
.overlay-block class for blocking an element content.
Content Blocking
<div class="card shadow">
<div class="card-header">
<h3 class="card-title">Content Blocking</h3>
</div>
<div class="card-body">
<div class="overlay overlay-block card-rounded">
<div class="overlay-wrapper p-5">
Lorem Ipsum is simply dummy text...
</div>
<div class="overlay-layer card-rounded bg-dark bg-opacity-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>Card Blocking
Use
.overlay-block class for blocking card element.
<div class="card card-border overlay overlay-block">
<div class="card-header">
<h3 class="card-title">Card Blocking</h3>
</div>
<div class="card-body">
<div class="overlay-wrapper p-5">
Lorem Ipsum is simply dummy text....
</div>
<div class="overlay-layer card-rounded bg-dark bg-opacity-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>Modal Blocking
Use
.overlay-block class block a modal's content.
<button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch modal</button>
<!--begin::Modal Body Overlay-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<i class="ki-duotone ki-cross fs-2x"><span class="path1"></span><span class="path2"></span></i>
</div>
<!--end::Close-->
</div>
<!--begin::Overlay-->
<div class="modal-body overlay overlay-block">
Lorem Ipsum is simply dummy text ...
<!--begin::Overlay Layer-->
<div class="overlay-layer bg-dark bg-opacity-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!--end::Overlay Layer-->
</div>
<!--end::Overlay-->
<div class="modal-footer">
<button type="button" class="btn btn-light-primary fw-semibold" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary ">Ok</button>
</div>
</div>
</div>
</div>
<!--end::Modal Body Overlay-->
2025©
Keenthemes
