<div class="container">

  <div class="comparison-slider-wrapper">
    <div id="ba-slider" class="comparison-slider">
      <div class="overlay">After</div>
      <img src="https://thepracticaldev.s3.amazonaws.com/i/f2l6lr9rwqt5kb8zlml4.jpg">
      <div class="resize">
        <div class="overlay">Before</div>
        <img src="https://thepracticaldev.s3.amazonaws.com/i/sd92rt23nr8xz2w0z9ds.jpg">
      </div>
      <div class="divider"></div>
    </div>
  </div>

</div>

/** baSlider styles */

.comparison-slider-wrapper .comparison-slider .divider::before {
  background-color: transparent;
}

.comparison-slider-wrapper .comparison-slider .divider::after {
  background-color: transparent;
  color: orangered;
  margin: 0;
  transform: translate(-50%, -50%);
}

/* Default Formatting */

body {
  text-align: center;
  padding: 0;
  margin: 0;
  font: 18px Helvetica Neue Light, Helvetica, Arial, sans-serif;
  color: white;
  background-color: black;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

h1, h2 {
  font-weight: 100;  
}

a {
  color: white;
  border-bottom: 3px solid black;
}

a:hover {
  color: gray;
  text-decoration: none;
  border-bottom: 3px solid gray;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-slider {
  width: 450px;
}

$(document).ready(function () {
  baSlider("#ba-slider");
});