Layering Test

by nathanziarek

HTML

<div id="container">
    <div class="layer content">
        <img src="http://lorempixel.com/500/500/sports/3" />
    </div>
    <div class="layer modal">Lorem Ipsum</div>
</div>

CSS

body, html { width: 100%; height: 100%; background: #333; margin: 0; padding: 0; overflow: hidden }

.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: scroll;
    -webkit-transition: -webkit-filter 300ms linear, -webkit-transform 300ms ease;
}
.open-modal .content {
    -webkit-filter: blur(2px);
    -webkit-transform: scale(.9);
}
.open-modal .modal {
    -webkit-filter: blur(0);
    -webkit-transform: scale(1);
    opacity: 1;
}

.modal {
    position: absolute;
    top: 30%;
    bottom: 30%;
    left: 20%;
    right: 20%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 0 15px rgba(0,0,0,.5);
    border-radius: 3px;
    border-top: 1p solid white;
    opacity: 0;
    -webkit-filter: blur(3px);
    -webkit-transform: scale(1.3);
    -webkit-transition: -webkit-filter 300ms linear 150ms, -webkit-transform 300ms ease 150ms, opacity 300ms ease 150ms;
}

JavaScript

$(".layer").click( function() {
    $("#container").toggleClass("open-modal");
})