1. Home
  2. /
  3. Web Design & Development
  4. /
  5. Javascript
  6. /
  7. How to add an overlay to your webpage?

How to add an overlay to your webpage?

How to add an overlay to your webpage?

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.

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.

Leave a Reply

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