# Metronic | Overlay
Overlay examples

Hi, Sean S

##### Overlay

Actions
Use `.overlay` component to have multi-purpose overlay components.
Explore Purchase

                    <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>

Explore Purchase

                    <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>

Explore Purchase

                    <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>

Shop Deal of the Day

                    <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>

Shop Deal of the Day

                    <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>

Shop Deal of the Day

                    <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>

### Card Blocking

Address Line 1 Please enter your Address.
Address Line 2 Please enter your Address 2.

                    <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>

### Content Blocking

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 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>

### Modal Blocking

Toggle a working modal demo by clicking the button below.

##### Modal Title

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.

##### Modal Title

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::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-->

### User Profile 12 messages

James Jones
Application Developer
jm@softplus.com Sign Out
My Profile
Account settings and more update
My Messages
Inbox and tasks
My Activities
Logs and notifications
My Tasks
latest tasks and projects

##### Recent Notifications

Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
Purpose would be to persuade Due in 2 Days
-27%
The best product Due in 2 Days
+8%

#### Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7

##### System Messages

Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$

##### Notifications

Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
Purpose would be to persuade Due in 2 Days
-27%
The best product Due in 2 Days
+8%
5 new user generated report
Reports based on sales
2 new items submited
by Grog John
79 PSD files generated
Reports based on sales
$2900 worth producucts sold
Total 234 items
4.5h-avarage response time
Fostest is Barry
3 Defence alerts
40% less alerts thar last week
Avarage 4 blog posts per author
Most posted 12 time
16 authors joined last week
9 photodrapehrs, 7 designer
2 new items have been submited
by Grog John
2.8 GB-total downloads size
Mostly PSD end AL concepts
$2900 worth producucts sold
Total 234 items
7 new user generated report
Reports based on sales
4.5h-avarage response time
Fostest is Barry

##### Customer Care

Enable Notifications:
Enable Case Tracking:
Support Portal:

##### Reports

Generate Reports:
Enable Report Export:
Allow Data Collection:

##### Memebers

Enable Member singup:
Allow User Feedbacks:
Enable Customer Portal:
Matt Pears
Active
Matt Pears 2 Hours
How likely are you to recommend our company to your friends and family?
3 minutes You
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Matt Pears 40 seconds
Ok, Understood!
Just now You
You’ll receive notifications for all issues, pull requests!
Matt Pears 40 seconds
You can unwatch this repository immediately by clicking here: https://github.com
Just now You
Discover what students who viewed Learn Figma - UI/UX Design. Essential Training also viewed
Matt Pears 40 seconds
Most purchased Business courses during this sale!
Just now You
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided

#### Select A Demo

##### Demo 1

Default RTL Version

##### Demo 2

Default RTL Version

##### Demo 3

Default RTL Version

##### Demo 4

Default RTL Version

##### Demo 5

Default RTL Version

##### Demo 6

Default RTL Version

##### Demo 7

Default RTL Version

##### Demo 8

Default RTL Version

##### Demo 9

Default RTL Version

##### Demo 10

Default RTL Version

##### Demo 11

Default RTL Version

##### Demo 12

Default RTL Version

##### Demo 13

Default RTL Version

##### Demo 14

Coming soon

##### Demo 15

Coming soon

##### Demo 16

Coming soon

##### Demo 17

Coming soon

##### Demo 18

Coming soon

##### Demo 19

Coming soon

##### Demo 20

Coming soon

##### Demo 21

Coming soon

##### Demo 22

Coming soon

##### Demo 23

Coming soon

##### Demo 24

Coming soon

##### Demo 25

Coming soon

##### Demo 26

Coming soon

##### Demo 27

Coming soon

##### Demo 28

Coming soon

##### Demo 29

Coming soon

##### Demo 30

Coming soon