Est ut nemo nostrum quae eligendi corporis ab eius

Minima adipisci omnis dolor cillum sapiente earum corporis beatae dolore tempore laborum Quia enim est id velit cupiditate

by Sam Fereday

HTML

<div class="container">
  <div class="layer layer-1">
    <img src="http://www.pngall.com/wp-content/uploads/2016/05/Red-Panda-Transparent.png" />
  </div>
  <div class="layer layer-2" data-attr="sync-group-a">
    <img src="http://www.pngall.com/wp-content/uploads/2016/05/Red-Panda-Transparent.png" />
  </div>
  <div class="layer layer-3" data-attr="sync-group-a"></div>
</div>

CSS

.container {
  width: 100%;
  position: relative;
  height: 300px;
  overflow: hidden;
}

img {
  position: absolute;
  left: 800px;
  top: 0;
  transition: all 0.2s ease;
}

.layer {
  position: absolute;
  width: 100%;
  height: 300px;
  top: 0;
  left: 0;
  transition: all 0.2s ease;
}

.layer-1 {
  background: url('http://enjoycss.com/webshots/hB_1.png');
}

.layer-1 img {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.layer-2 {
  left: 0;
  max-width: 192px;
  height: 0;
  overflow: hidden;
}

.layer-3 {
  background: rgba(244, 0, 0, 0.3);
  left: 0;
  max-width: 192px;
  height: 0;
  overflow: hidden;
}

JavaScript

function getAllElementsWithAttribute(attribute) {
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++) {
    if (allElements[i].getAttribute(attribute) !== null) {
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

let farback = document.querySelector('.layer-1');
let backface = document.querySelector('.layer-2');
let overlay = document.querySelector('.layer-3');
let imgs = document.querySelectorAll('img');

function rp() {

  overlay.style.height = 100 + '%';
  backface.style.height = 100 + '%';

  setTimeout(function() {
    for (var i = 0; i < imgs.length; i++) {

      imgs[i].style.left = 10 + 'px';

    }
  }, 200);

}

rp();