Merged Image POC

A-Pen-by-Clinton-Crick.markdown

A proof of concept for merging images at the client using CSS's opacity.

A Pen by Clinton Crick on CodePen.

License.

index.html

<div id="wrap">
  <div class="image i1">
  </div>
  <div class="image i2">
  </div>
  <div class="image i3">
  </div>
</div>

style.css

div.image {
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
  width: 600px;
  display: block;
}


div.image.i1 {
  background: url('http://distilleryimage5.ak.instagram.com/d3f86cbe4fba11e3977912351092712f_8.jpg');
  opacity: 1;
}

div.image.i2 {
 background: url('http://distilleryimage8.ak.instagram.com/f9bf1a96506011e3880b0aa5c59d476a_8.jpg');
  opacity: 0.5;
}

div.image.i3 {
 background: url('http://distilleryimage3.ak.instagram.com/0cc94a5e4f2f11e3b75d0ee2f53ed40e_8.jpg');
  opacity: 0.333333;
}