Bootstrap 4.0.0 Snippet by clockhart18

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function initComparisons() { var x, i; /*find all elements with an "overlay" class:*/ x = document.getElementsByClassName("img-comp-overlay"); for (i = 0; i < x.length; i++) { /*once for each "overlay" element: pass the "overlay" element as a parameter when executing the compareImages function:*/ compareImages(x[i]); } function compareImages(img) { var slider, img, clicked = 0, w, h; /*get the width and height of the img element*/ w = img.offsetWidth; h = img.offsetHeight; /*set the width of the img element to 50%:*/ img.style.width = (w / 20) + "px"; /*create 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 = (h / 5) - (slider.offsetHeight / 20) + "px"; slider.style.left = (w / 50) - (slider.offsetWidth / 50) + "px"; /*execute 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; /*execute 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; } function slideMove(e) { var pos; /*if the slider is no longer clicked, exit this function:*/ if (clicked == 0) return false; /*get the cursor's x position:*/ pos = getCursorPos(e) /*prevent the slider from being positioned outside the image:*/ if (pos < 0) pos = 0; if (pos > w) pos = w; /*execute a function that will resize the overlay image according to the cursor:*/ slide(pos); } function getCursorPos(e) { var a, x = 0; e = e || window.event; /*get the x positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x coordinate, relative to the image:*/ x = e.pageX - a.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 / 6) + "px"; } } } </script> </head> <body> <div class="img-comp-container"> <div class="img-comp-img"> <img src="http://www-dev.channeladvisor.com/wp-content/uploads/2018/05/CAQuestionsSlider.jpg" width="800px" height="auto"> </div> <div class="img-comp-img img-comp-overlay"> <img src="http://www-dev.channeladvisor.com/wp-content/uploads/2018/05/CASolutionsSlider.jpg" width="800px" height="auto"> </div> </div> <script> /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/ initComparisons(); </script> </body> </html>
@import "font-awesome-sprockets"; @import "font-awesome"; .img-comp-container { position: relative; height: 100%; /*should be the same height as the images*/ } .img-comp-img { position: absolute; width: auto; height: auto; overflow:hidden; } .img-comp-img img { display:block; } .img-comp-slider { position: absolute; z-index:9; cursor: ew-resize; /*set the appearance of the slider:*/ width: 70px; height: 70px; background-color: #e87d0d; opacity: 0.8; color: #fff; } .img-comp-slider:before { padding-left:25%; padding-bottom: 55%; content: '\f07e'; color: #fff; font-size:50px; text-align: center; vertical-align: middle; }

Related: See More

Questions / Comments: