How to add an overlay to your webpage?

How to add an overlay to your webpage

Table of Contents

Sometimes, We want our website visitors to focus on a certain text or element on the webpage and at the same time making the other part of the page appear in the background with very little visibility. In this article, We will achieve this using some CSS styling.

overlay to your webpage
overlay to your webpage

HTML

<button onclick="showOverlay()">Show Overlay</button>
<div id="overlay">
<div class="overlay-content">
<p>Hey! This will display in the center of the screen with an overlay.</p>
<button onclick="closeOverlay()">Close Overlay</button>
</div>
</div>

CSS

<style type="text/css">
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 100;
    cursor: pointer;
}
.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 300px;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
}
</style>

Javascript

<script type="text/javascript">
function showOverlay(){
jQuery('#overlay').show('slow');
}
function closeOverlay(){
jQuery('#overlay').hide('slow');
}
</script>

DEMO

Hey! This will display in the center of the screen with an overlay.

Reviews & Ratings Get your stoe online with Shopify in 60 minutes Shop Now