Google map folded Dengan css

DEMO

CSSbody {
    background: url(http://subtlepatterns.com/patterns/wood_pattern.png);
    margin: 50px;
}

.holder {
    width: 400px;
    height: 400px;
    overflow: hidden;
    position: relative;
    z-index: 799;
}

.hold_it {
    padding: 10px;
    background: #fff;
    display: inline-block;
    box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
    position: relative;
    width: 400px;
    margin: 0 auto;
    left: 200px;
}

iframe {
    z-index: -999;
    position: absolute;
}

.shadow1 {
 z-index: 999;
 position: absolute;
 background: url(data: image/svg+xml;
 base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

 background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -o-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -ms-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=1 );
 width: 50%;
 height: 50%;
 pointer-events: none;
}

.shadow2 {
 z-index: 999;
 position: absolute;
 background: url(data: image/svg+xml;
 base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

 background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -o-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -ms-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=1 );
 width: 50%;
 height: 50%;
 left: 50%;
 pointer-events: none;
}

.shadow3 {
 z-index: 999;
 position: absolute;
 background: url(data: image/svg+xml;
 base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

 background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -o-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -ms-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=1 );
 width: 50%;
 height: 50%;
 top: 50%;
 pointer-events: none;
}

.shadow4 {
 z-index: 999;
 position: absolute;
 background: url(data: image/svg+xml;
 base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

 background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -o-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: -ms-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 background: linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 99%, rgba(0,0,0,0.2) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=1 );
 width: 50%;
 height: 50%;
 top: 50%;
 left: 50%;
 pointer-events: none;
}

HTML<div class="hold_it">
 <div class="holder">
   <iframe width="400" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.de/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=New+York+City,+New+York,+USA&amp;aq=0&amp;oq=new+&amp;sll=51.933681,7.655246&amp;sspn=0.088801,0.154324&amp;ie=UTF8&amp;hq=&amp;hnear=Manhattan,+New+York,+Vereinigte+Staaten&amp;t=m&amp;ll=40.832515,-73.970947&amp;spn=0.207813,0.273972&amp;z=11&amp;iwloc=A&amp;output=embed"></iframe>
   <div class="shadow1"></div>
   <div class="shadow2"></div>
   <div class="shadow3"></div>
   <div class="shadow4"></div>
 </div>
</div>