HTML code. Map by Google Maps API (static):
<div class="fold-map">
<img src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=300x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false" /></div>
CSS code:
body{
padding: 50px;
}
.fold-map{
padding: 10px;
-webkit-box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
width: 300px;
height: 300px;
}
.fold-map:before{
content: '';
display: block;
position: absolute;
background: gray;
width: 150px;
height: 300px;
float: left;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(0,0,0,0.1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#1a000000',GradientType=1 );
}
Demo:
http://jsfiddle.net/tjerabek/wP5aw/
