I am trying to create responsive html overlay (which contains one image and close button). It should be from 30px down from top of page.

I tried below code:

html

<div class="wrapper">
    <div class="overlaymain">
        <img class="overlayimage" src=".png">
    </div>
</div>

css

.wrapper {
    position:relative;
    height:100%;
    background:red;
    opacity:0.9;
}
.overlaymain {
    top:30px;
    position:absolute;
}

jsfiddle

I am unable to make it work.

I am trying to create responsive html overlay (which contains one image and close button). It should be from 30px down from top of page.

I tried below code:

html

<div class="wrapper">
    <div class="overlaymain">
        <img class="overlayimage" src="http://assets.cobaltnitra./teams/repository/export/v/1/391/435a06bcb100589f410145edef087/391435a06bcb100589f410145edef087.png">
    </div>
</div>

css

.wrapper {
    position:relative;
    height:100%;
    background:red;
    opacity:0.9;
}
.overlaymain {
    top:30px;
    position:absolute;
}

jsfiddle

I am unable to make it work.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 25, 2015 at 15:08 Pete 58.5k2929 gold badges130130 silver badges184184 bronze badges asked Sep 25, 2015 at 8:15 Devaki DarshiniDevaki Darshini 5511 silver badge66 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can try the following - it uses css3 to keep the overlay image centred (use full page link on snippet below and resize browser to test) and should work in all major browsers.

I wasn't sure what the wrapper div was for so I have removed it. You can add it back if you want as it doesn't make any difference to the code below.

var overlay = $('.overlay'),
    close = $('<div class="close">close</div>');

overlay.append(close);

$(overlay, close).on('click', function () {
    overlay.fadeOut();
});

.overlay {
    position:fixed;
    left:0;
    right:0;
    top:30px;
    bottom:0;
    background:rgba(255, 0, 0, 0.7); /* use this so that the image doesn't go opaque too */
}
.overlay > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* center the image in the overlay */
}
.close {
    border-radius:5px;
    color:#ffffff;
    background-color:#000000;
    display:inline-block;
    padding:5px 10px;
    position:absolute;
    bottom:10px;
    right:10px;
    cursor:pointer;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
watsapppwatsapppwatsappp
<br>
<br>watsapppwatsapppwatsappp
<div class="overlay">
    <img class="overlayimage" src="http://assets.cobaltnitra./teams/repository/export/v/1/391/435a06bcb100589f410145edef087/391435a06bcb100589f410145edef087.png">
</div>

If I understand you right, You're trying to make a popup window. The easiest way is to use some nice jQuery plugin like THIS

But if you want to do it yourself, you have to set wrapper's position to fixed and put that div on top in DOM.

You can make close button with jQuery like this:

$('#close').click(function() {
    $(".wrapper").hide();
});

Here's your updated JSFiddle with close button

make changes in wrapper css

    .wrapper {
        position:absolute;
        background:red;
        opacity:0.5;
        top:30px;
    }
    .overlaymain {
        position:absolute;
    }

Fiddle

Um, you didn't put your content inside the wrapper. I'm assuming the wrapper is your regular content and overlaymain is your overlay..

http://jsfiddle/u0kp6k0x/5/

<div class="wrapper">watsapppwatsapppwatsappp
    <br />
    <br />watsapppwatsapppwatsappp
    <div class="overlaymain">
        <img class="overlayimage" src="http://assets.cobaltnitra./teams/repository/export/v/1/391/435a06bcb100589f410145edef087/391435a06bcb100589f410145edef087.png">
    </div>
</div>

Try this CSS and it should work:

.wrapper {
background:red;
    opacity:0.9;
    position:absolute; /*needed*/
    display: block; /*needed*/
    height:350px; /*choose desired height*/
    width: 550px; /*choose desired width*/
    top: 30px; /*distance to page-top*/
    left: 0; /*needed*/
    right: 0; /*needed*/
    margin: auto; /*this centers the div horizontally*/

}

.overlaymain {} /*this is not needed for the overlay*/