"Untitled"
Bootstrap 4.1.1 Snippet by krunb

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <div class="container"> <div class="row"> <div class="col-12"> <div class="compare-box"> <img id="newPic" src="https://love-img.com/wp-content/uploads/2017/11/3504.jpg" class="new-pic img-fluid"> <img src="https://gfx4arab.com/wp-content/uploads/2017/10/Ryad.jpg" class="old-pic img-fluid"> </div> </div> </div> </div>
/* Comparing ... */ .compare-box{ position: relative; width: 900px; height: 600px; overflow: hidden; } .new-pic{ position: absolute; left: 0; top: 0; z-index: -1; opacity: 0; } .img-magnifier-glass { border: 3px solid #fff; width: 300px; height: 300px; padding: 0; margin: 0; top: 0; left: 0; overflow: hidden; cursor: move; position: absolute; z-index: 3; resize: both }
function magnify(imgID, zoom) { var img, glass, w, h, bw; img = document.getElementById(imgID); /* Create magnifier glass: */ glass = document.createElement("DIV"); glass.setAttribute("class", "img-magnifier-glass"); /* Insert magnifier glass: */ img.parentElement.insertBefore(glass, img); /* Set background properties for the magnifier glass: */ glass.style.backgroundImage = "url('" + img.src + "')"; glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; bw = 3; w = glass.offsetWidth / 2; h = glass.offsetHeight / 2; /* Execute a function when someone moves the magnifier glass over the image: */ glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier); /*and also for touch screens:*/ glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(e) { var pos, x, y; /* Prevent any other actions that may occur when moving over the image */ e.preventDefault(); /* Get the cursor's x and y positions: */ pos = getCursorPos(e); x = pos.x; y = pos.y; /* Prevent the magnifier glass from being positioned outside the image: */ if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} if (x < w / zoom) {x = w / zoom;} if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} if (y < h / zoom) {y = h / zoom;} /* Set the position of the magnifier glass: */ glass.style.left = (x - w) + "px"; glass.style.top = (y - h) + "px"; /* Display what the magnifier glass "sees": */ glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /* Get the x and y positions of the image: */ a = img.getBoundingClientRect(); /* Calculate the cursor's x and y coordinates, relative to the image: */ x = e.pageX - a.left; y = e.pageY - a.top; /* Consider any page scrolling: */ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } magnify("newPic", 1);

Related: See More


Questions / Comments: