Before-After Images

HTML

<div class="before">
  <img src="http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=360x260&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318&markers=color:red|color:red|label:C|2.718217,-73.998284&sensor=true&maptype=satellite"
  /> </div>

<div class="after "><img src="http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=360x260&markers=color:blue|label:S|0.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318&markers=color:red|color:red|label:C|0.718217,-73.998284&sensor=true"
  />
</div>

CSS

.before {
  left: 0px;
  top: 0px;
  z-index: 2;
}

.after {
  right: 0px;
  top: 0px;
  z-index: 1;
}