Back-to-Back Design

Artsy design conceptualization.

by Troy Alford

HTML

<img src="http://i.imgur.com/MDt2to3.png" />
<div class="overlay left"></div>
<div class="overlay right"></div>

CSS

html, body { margin: 0; padding: 0; }
img { 
    margin-top: 100px;
    left: 50%; margin-left: 5px;
    position: relative;
}
div.overlay {
    background: #000;
    display: inline-block;
    position: absolute;
    top: 0;
    opacity: 0.5;
}
div.overlay:hover {
    opacity: 0.0;
}
div.left { left: 0; }
div.right { right: 0; }

JavaScript

var width = $(window).width();
var height = $(window).height();
$('body, div.overlay').css({
    'width': (width / 2) + 'px',
    'height': height + 'px'
});