Add a pixel-perfect overlay to your design

  • Want a fresh pair of eyes?

    A lot of times we find an outside perspective can work wonders. If you'd like to send us your information, we have no problems listening and offering our thoughts.

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 *

  • Want a fresh pair of eyes?

    A lot of times we find an outside perspective can work wonders. If you'd like to send us your information, we have no problems listening and offering our thoughts.

Recent Posts
Tags
Archives