<div class="page-wrap">

  

    <div class="vfx-image-wrap">
      <div class="before-image">
        <img src="67/VFX-before.jpg" alt="" />
      </div>
      <div class="after-image">
        <img src="67/VFX-after.jpg" alt="" />
      </div>
      <div class="divider-bar"></div>
    </div>
    <div class="vfx-image-wrap">
      <div class="before-image">
        <img src="67/VFX3-before.jpg" alt="" />
      </div>
      <div class="after-image">
        <img src="67/VFX3-after.jpg" alt="" />
      </div>
      <div class="divider-bar"></div>
    </div>

     <div class="vfx-image-wrap">
      <div class="before-image">
        <img src="67/VFX2-before.jpg" alt="" />
      </div>
      <div class="after-image">
        <img src="67/VFX2-after.jpg" alt="" />
      </div>
      <div class="divider-bar"></div>
    </div>

</div>

html {
  font-family: 'Ubuntu Mono' arial, sans-serif;
  background: #d1d1de;
  text-align: center;
  color: white;
}

.page-wrap {
  margin: 0 auto;
  width: 600px;
  max-width: 100%;
  padding-top: 25px;
}

.toggle-function {
  text-align: center;
  width: 100%;
  display: block;
  margin: 10px 0 25px 0;
}

.btn {
  display: inline-block;
  padding: .5em;
  text-align: center;
  border: 2px solid white;
  cursor: pointer;
  background-color: white;
  color: #d1d1de;
}
.btn:nth-child(2) {
  border-left: none;
}
.btn:nth-child(1) {
  background-color: transparent;
  color: white;
}
.stay .btn {
  background-color: #d1d1de;
  color: white;
}
.stay .btn:nth-child(1) {
  background-color: white;
  color: #d1d1de;
}

.vfx-image-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  width: 600px;
  min-height: 273px;
  margin-bottom: 40px;
  cursor: ew-resize;
}

.before-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 50%;
  overflow: hidden;
}

.after-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.divider-bar {
  position: absolute;
  width: 2px;
  left: 50%;
  top: -10px;
  bottom: -15px;
  background: white;
  height: 100%;
  display: block;
  z-index: 2;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
}

// OMG I should be a JS Deveoper, JK I hardly know what the hell I'm doing

// Some notes taken from https://codepen.io/Fellini85/pen/oaDBh
$(function () {
    var imageWrap = $('.vfx-image-wrap'),
        topImage = $(this).find('.before-image'),
        divider = $(this).find('.divider-bar'),
        stayBounce = $('.toggle-function');

    imageWrap.on("mousemove", function (e) {
      // Gotta localize top image and divider so it only applies to this
        var offsets = $(this).offset(),
            fullWidth = $(this).width(),
            mouseX = e.pageX - offsets.left,
            topImage = $(this).find('.before-image'),
            divider = $(this).find('.divider-bar');

        if (mouseX < 0) {
            mouseX = 0;
        } else if (mouseX > fullWidth) {
            mouseX = fullWidth
        }
      $(this).addClass('special');
        divider.css({ left: mouseX, transition: 'none' });
        topImage.css({ width: mouseX, transition: 'none' });
    });
  stayBounce.click(function(){
    $(this).toggleClass('stay');
  });

  imageWrap.on("mouseleave", function () {
    if (!stayBounce.hasClass('stay')) {
      divider.css({  left: '50%', transition: 'all .3s' });
      topImage.css({  width: '50%', transition: 'all .3s' });
    }
  });
});