Sneak Preview

by Imri Paloja

HTML

<ul id="image-gallery" style="display: none;">

					<li>
						<a href="http://i.stack.imgur.com/psaN2.png" title="The Firefox Developer Edition">
							<img src="http://i.stack.imgur.com/psaN2.png" alt="The Firefox Developer Edition">
						</a>
					</li>

					<li>
						<a href="http://i.imgur.com/q5XkBBl.png" title="Mega Sync Client for Linux">
							<img src="http://i.imgur.com/q5XkBBl.png" alt="Mega Sync Client for Linux">
						</a>
					</li>

					<li>
						<a href="http://i.imgur.com/8nz3i8H.png" title="Pidgin, the universal chat client">
							<img src="http://i.imgur.com/8nz3i8H.png" alt="Pidgin, the universal chat client">
						</a>
					</li>

					<li>
						<a href="http://i.imgur.com/2IDcQRu.png" title="Microsoft Office working under Ubuntu?">
							<img src="http://i.imgur.com/2IDcQRu.png" alt="Microsoft Office working under Ubuntu?">
						</a>
					</li>

					<li>
						<a href="http://i.imgur.com/ACXq2XL.png" title="How To: Use WhatsApp under Ubuntu">
							<img src="http://i.imgur.com/ACXq2XL.png" alt="How To: Use WhatsApp under Ubuntu">
						</a>
					</li>

				</ul>
        
        
        <div id="overlay">
        
        </div>

CSS

html, body {
  margin: 0px;
}

ul {
  list-style-type: none;
  display: inline-block;
}
 ul li {
   margin: 2px 3px;
 }
 
 div#overlay {
    background: rgba(238, 238, 238, 0.75) none repeat scroll 0 0;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 90000;
}

.sneak-image-holder img {
    background: #ffffff none repeat scroll 0 0;
    box-shadow: 0 0 5px #454545;
    max-width: 100%;
    min-width: 250px;
    width: auto;
}

.sneak-image-holder {
    margin: 5% auto;
    text-align: center;
    width: 50%;
}

div#overlay a {
    background: #eeeeee none repeat scroll 0 0;
    color: #454545;
    cursor: pointer;
    display: block;
    font-family: monospace;
    font-size: 75px;
    margin: 2px 3px;
    padding: 0 3px;
    text-align: center;
    text-decoration: none;
    top: 25%;
    width: 50px;
    z-index: 9;
}

div#overlay a:hover div {
/*    background: #454545 none repeat scroll 0 0;
    bottom: 0;
    color: #f9f9f9;
    left: -3px !important;
    padding: 15% 15px 0 0;
    position: fixed !important;
    top: -2px;
    width: 100px;*/
}

.sneak-image-holder.before {
    left: -20%;
    position: fixed;
    top: 0;
    width: 25%;
}


.sneak-image-holder.after {
    position: fixed;
    right: -20%;
    top: 0;
    width: 25%;
}


div#overlay a.sneak-left:hover, div#sneak-left-holder {
    background: #454545 none repeat scroll 0 0;
    bottom: 0;
    color: #f9f9f9;
    left: -3px !important;
    padding: 14% 15px 0 0;
    position: fixed !important;
    top: -11px;
    width: 100px;
}

div#overlay a.sneak-right:hover, div#sneak-right-holder {
    background: #454545 none repeat scroll 0 0;
    bottom: 0;
    color: #f9f9f9;
    padding: 14% 15px 0 0;
    position: fixed !important;
    right: -13px !important;
    top: -11px;
    width: 100px;
}


div#overlay a.sneak-left {
	position: absolute;
	left: 1%;
}

div#overlay a.sneak-right {
	position: absolute;
	right: 1%;
}


div#overlay span.close {
	border: 1px solid...

JavaScript

var $clone = $('img').clone();


var $newElement = $('<div />').addClass('content-left').html('<div class=\"sneak-left-holder\"> <a class=\"sneak-left\" href=\"#\">&lt;</a></div>').append($clone);

//then you can add the new element(s) to the DOM
$newElement.appendTo('#overlay');