.overlaycomponent to have multi-purpose overlay components.
<div class="card card-custom overlay">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="<?php echo Page::getMediaPath();?>stock-600x400/img-1.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer">
<a href="#" class="btn font-weight-bold btn-primary btn-shadow" >Explore</a>
<a href="#" class="btn font-weight-bold btn-light-primary btn-shadow ml-2">Purchase</a>
</div>
</div>
</div>
<div class="card card-custom overlay">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="<?php echo Page::getMediaPath();?>stock-600x400/img-2.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer align-items-end justify-content-center">
<div class="d-flex flex-grow-1 flex-center bg-white-o-5 py-5">
<a href="#" class="btn font-weight-bold btn-primary btn-shadow">Explore</a>
<a href="#" class="btn font-weight-bold btn-light-primary btn-shadow ml-2">Purchase</a>
</div>
</div>
</div>
</div>
<div class="card card-custom overlay">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="<?php echo Page::getMediaPath();?>stock-600x400/img-3.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer align-items-start justify-content-center">
<div class="d-flex flex-grow-1 flex-center bg-white-o-5 py-5">
<a href="#" class="btn font-weight-bold btn-primary btn-shadow">Explore</a>
<a href="#" class="btn font-weight-bold btn-light-primary btn-shadow ml-2">Purchase</a>
</div>
</div>
</div>
</div>
<div class="card card-custom overlay">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="<?php echo Page::getMediaPath();?>stock-600x400/img-4.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer align-items-end justify-content-end pb-5 pr-5">
<a href="#" class="btn btn-clean btn-icon mr-2"><i class="flaticon2-notification icon-lg text-primary"></i></a>
<a href="#" class="btn btn-clean btn-icon"><i class="flaticon2-plus icon-lg text-primary"></i></a>
</div>
</div>
</div>
<div class="card card-custom overlay">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="<?php echo Page::getMediaPath();?>stock-600x400/img-5.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer align-items-start justify-content-end pt-5 pr-5">
<a href="#" class="btn btn-clean btn-icon mr-2"><i class="flaticon2-notification icon-lg text-primary"></i></a>
<a href="#" class="btn btn-clean btn-icon"><i class="flaticon2-plus icon-lg text-primary"></i></a>
</div>
</div>
</div>
<div class="card card-custom overlay">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="<?php echo Page::getMediaPath();?>stock-600x400/img-6.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer align-items-start justify-content-start pt-5 pl-5">
<a href="#" class="btn btn-clean btn-icon mr-2"><i class="flaticon2-notification icon-lg text-primary"></i></a>
<a href="#" class="btn btn-clean btn-icon"><i class="flaticon2-plus icon-lg text-primary"></i></a>
</div>
</div>
</div>
<div class="card card-custom overlay">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="<?php echo Page::getMediaPath();?>stock-600x400/img-7.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer m-5 rounded align-items-end justify-content-start">
<div class="d-flex flex-column align-items-start mb-5 ml-5">
<span class="label label-success label-xl label-inline mb-1">Shop</span>
<a href="#" class="font-size-h4 font-weight-bolder text-white text-hover-primary">Deal of the Day</a>
</div>
</div>
</div>
</div>
<div class="card card-custom overlay">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="<?php echo Page::getMediaPath();?>stock-600x400/img-8.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer m-5 rounded flex-center">
<div class="d-flex flex-column flex-center">
<span class="label label-danger label-xl label-inline mb-1">Shop</span>
<a href="#" class="font-size-h4 font-weight-bolder text-white text-hover-primary">Deal of the Day</a>
</div>
</div>
</div>
</div>
<div class="card card-custom overlay">
<div class="card-body p-0">
<div class="overlay-wrapper">
<img src="<?php echo Page::getMediaPath();?>stock-600x400/img-9.jpg" alt="" class="w-100 rounded"/>
</div>
<div class="overlay-layer m-5 rounded align-items-start justify-content-end">
<div class="d-flex flex-column mt-5 mr-5 align-items-end">
<span class="label label-warning label-xl label-inline mb-1">Shop</span>
<a href="#" class="font-size-h4 font-weight-bolder text-white text-hover-primary">Deal of the Day</a>
</div>
</div>
</div>
</div>
<div class="card card-custom overlay overlay-block">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card Blocking</h3>
</div>
</div>
<div class="card-body">
<div class="overlay-wrapper">
<div class="form-group">
<label>Address Line 1</label>
<input type="text" class="form-control form-control-solid form-control-lg" name="address1" placeholder="Address Line 1"/>
<span class="form-text text-muted">Please enter your Address.</span>
</div>
<div class="form-group">
<label>Address Line 2</label>
<input type="text" class="form-control form-control-solid form-control-lg" name="address1" placeholder="Address Line 1"/>
<span class="form-text text-muted">Please enter your Address 2.</span>
</div>
</div>
<div class="overlay-layer bg-dark-o-10">
<div class="spinner spinner-primary"></div>
</div>
</div>
</div>
<div class="overlay overlay-block rounded">
<div class="overlay-wrapper p-5">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to.
</div>
<div class="overlay-layer rounded bg-primary-o-20">
<div class="spinner spinner-primary"></div>
</div>
</div>
Toggle a working modal demo by clicking the button below.
<!--begin::Modal Body Overlay-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<!--begin::Overlay-->
<div class="modal-body overlay overlay-block">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
<!--begin::Overlay Layer-->
<div class="overlay-layer bg-transparent">
<div class="spinner spinner-lg spinner-warning"></div>
</div>
<!--end::Overlay Layer-->
</div>
<!--end::Overlay-->
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary font-weight-bold">Save changes</button>
</div>
</div>
</div>
</div>
<!--end::Modal Body Overlay-->
<!--begin::Entire Modal Overlay-->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--begin::Overlay-->
<div class="overlay overlay-block">
<!--begin::Modal Content-->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary font-weight-bold">Save changes</button>
</div>
<!--end::Modal Content-->
<!--begin::Overlay Layer-->
<div class="overlay-layer bg-success-o-20">
<div class="spinner spinner-lg spinner-danger"></div>
</div>
<!--end::Overlay Layer-->
</div>
<!--end::Overlay-->
</div>
</div>
</div>
<!--end::Entire Modal Overlay-->
