function initializeComparisons() {
          var y, j;
          /*find all items with an "overlay" class:*/
          y = document.getElementsByClassName("img-comp-overlay");
          for (j = 0; j < y.length; j++) {
            /*for each "overlay" item:
            pass the "overlay" item as an argument when running the compareImages function:*/
            compareImages(y[j]);
          }
          function compareImages(img) {
            var slider, image, clicked = 0, width, height;
            /*obtain the width and height of the img element*/
            width = img.offsetWidth;
            height = img.offsetHeight;
            /*set the width of the img element to 50%:*/
            img.style.width = (width / 2) + "px";
            /*create a slider:*/
            slider = document.createElement("DIV");
            slider.setAttribute("class", "img-comp-slider");
            /*insert slider*/
            img.parentElement.insertBefore(slider, img);
            /*position the slider in the middle:*/
            slider.style.top = (height / 2) - (slider.offsetHeight / 2) + "px";
            slider.style.left = (width / 2) - (slider.offsetWidth / 2) + "px";
            /*run a function when the mouse button is pressed:*/
            slider.addEventListener("mousedown", slideReady);
            /*and another function when the mouse button is released:*/
            window.addEventListener("mouseup", slideFinish);
            /*or touched (for touch screens:*/
            slider.addEventListener("touchstart", slideReady);
             /*and released (for touch screens:*/
            window.addEventListener("touchstop", slideFinish);
            function slideReady(e) {
              /*prevent any other actions that may occur when moving over the image:*/
              e.preventDefault();
              /*the slider is now clicked and ready to move:*/
              clicked = 1;
              slider.style.border = "0";
              /*run a function when the slider is moved:*/
              window.addEventListener("mousemove", slideMove);
              window.addEventListener("touchmove", slideMove);
            }
            function slideFinish() {
              /*the slider is no longer clicked:*/
              clicked = 0;
              slider.style.border = "3px solid white";
            }
            function slideMove(e) {
              var position;
              /*if the slider is no longer clicked, exit this function:*/
              if (clicked == 0) return false;
              /*get the cursor's x position:*/
              position = getCursorPos(e)
              /*prevent the slider from being positioned outside the image:*/
              if (position < 0) position = 0;
              if (position > width) position = width;
              /*run a function that will resize the overlay image according to the cursor:*/
              slide(position);
            }
            function getCursorPos(e) {
              var b, x = 0;
              e = e || window.event;
              /*get the x positions of the image:*/
              b = img.getBoundingClientRect();
              /*calculate the cursor's x coordinate, relative to the image:*/
              x = e.pageX - b.left;
              /*consider any page scrolling:*/
              x = x - window.pageXOffset;
              return x;
            }
            function slide(x) {
              /*resize the image:*/
              img.style.width = x + "px";
              /*position the slider:*/
              slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
            }
          }
        } 

html, body { 
          background-color: #333333;
          margin: 0;
          padding: 0;
         }

        * {box-sizing: border-box;}

        .gallery_text {
          color: white;
          font-family: Abel, Helvetica, sans-serif;
          font-size: 1.7rem;
          text-align: center;
          line-height: 1.8em;
        }

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

        .img-comp-container{
          position: relative;
          flex: 50%;
        }

        .img-comp-overlay{
          border-right: 2px solid rgba(51,51,51, .5) ;
        }

        .img-comp-img {
          position: absolute;
          width: auto;
          height: auto;
          overflow: hidden;
        }

        .img-comp-img img {
          vertical-align: middle;
        }

        .img-comp-slider {
          position: absolute;
          z-index: 9;
          cursor: ew-resize;
          width: 40px;
          height: 40px;
          transform: rotate(136deg);
          background-color: #333333;
          opacity: .8;
          border-radius: 10%;
          border: 3px solid white;
        }

 <body onload="initializeComparisons();">

    <div class="row">

            <div class="img-comp-container" >
              <div class="img-comp-img">
                <img src="https://images.pexels.com/photos/162389/lost-places-old-decay-ruin-162389.jpeg?cs=srgb&dl=black-and-white-dark-building-162389.jpg&fm=jpg" width="500" height="450">
              </div>
                <div class="separator"></div>
              <div class="img-comp-img img-comp-overlay">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSslfAcWKXuMxBpzcJC5ZUyFqMOb2Jtd12x4kBUGG9mTe3KeMJz" width="500" height="450">
              </div>
            </div>

            <div class="img-comp-container">
              <div class="img-comp-img">
                <img src="https://images.pexels.com/photos/162389/lost-places-old-decay-ruin-162389.jpeg?cs=srgb&dl=black-and-white-dark-building-162389.jpg&fm=jpg" width="500" height="450">
              </div>
                <div class="separator"></div>
              <div class="img-comp-img img-comp-overlay">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSslfAcWKXuMxBpzcJC5ZUyFqMOb2Jtd12x4kBUGG9mTe3KeMJz" width="500" height="450">
              </div>
            </div>

            <div class="img-comp-container">
              <div class="img-comp-img">
                <img src="https://images.pexels.com/photos/162389/lost-places-old-decay-ruin-162389.jpeg?cs=srgb&dl=black-and-white-dark-building-162389.jpg&fm=jpg" width="500" height="450">
              </div>
                <div class="separator"></div>
              <div class="img-comp-img img-comp-overlay">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSslfAcWKXuMxBpzcJC5ZUyFqMOb2Jtd12x4kBUGG9mTe3KeMJz" width="500" height="450">
              </div>
            </div>
        
    </div>

</body>