Add a pixel-perfect overlay to your design

Thanks for your interest but we are no longer taking projects.

Like Us On Facebook:  

It can be hard trying to match up a client’s mockup to your web design. Margins, padding, etc can be tricky and time consuming, having to refresh the page constantly.

Use this code to overlay a file, complete with on/off switch!

First, add this to your stylesheet.

.overlay{

background-image: url(/**your image link goes here**/);
position: absolute;
top: 0px;
left: 0px;
width:100%;
opacity:.5;

z-index: 999;
}
.designOverlay {
position: absolute; left: 0; top: 0;
width: 100%; height: 101%;
text-align: center;
}
.designOverlay a {
position: fixed;
z-index: 6000;
width: 40px; height: 40px;
}
.designOverlay img {
position: relative;
z-index: 5000;
opacity: 0.3;
}
.overlay-off {
left: 55px; top: 15px;
background: rgba(113,19,19,0.5);
}
.overlay-on {
left: 15px; top: 15px;
background: rgba(19,112,20,0.5);
}
#no-overlay:target {
display: none;
}

*Note: be sure to change the background-image to your mockup

Next, add the following block of code right after the opening body tag.

<div class=”designOverlay”>
<a class=”overlay-off” href=”#no-overlay”></a>
<img id=”no-overlay” src=”put your img here” alt=”” />
<a class=”overlay-on” href=”#”></a>
</div>

 

Be sure to change the img src to your mockup image as well.

This will overlay the image, and add a red “off” switch and green “on” switch in the top-left of your site.


Have your say!

Have your say!

Message

Name *

Email *

Thanks for your interest but we are no longer taking projects.

Recent Posts
Tags
Archives