"Anirudha Bhowmik Zoom image on mouse move"
Bootstrap 4.0.0 Snippet by anirudhabhowmik

<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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/osublake/pen/gGLLOa?limit=all&page=60&q=draggable" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">* { box-sizing: border-box; } html, body { height: 100%; min-height: 100%; } body { overflow: hidden; } .container, .outline, .image, .handle { position: absolute; top: 50%; left: 50%; } .container { visibility: hidden; } .outline { border: 1px dashed black; } .handle { width: 15px; height: 15px; background: #000; border-radius: 50%; } </style></head><body> <div class="container"> <img class="image" width="128" height="128" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/bee3.svg" alt=""> <div class="outline"></div> <div class="handle"></div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js'></script> <script >console.clear(); var container = document.querySelector(".container"); var outline = document.querySelector(".outline"); var handle = document.querySelector(".handle"); var image = document.querySelector(".image"); var origSize = { width: image.width, height: image.height }; var origVector = { x: origSize.width/ 2, y: -origSize.height / 2 }; // Length/magnitude of vector var len1 = Math.sqrt(origVector.x * origVector.x + origVector.y * origVector.y); // Normalized vector var v1 = { x: origVector.x / len1, y: origVector.y / len1 }; // Angle of vector var angle1 = Math.atan2(v1.y, v1.x); TweenLite.set([container, image, handle, outline], { xPercent: -50, yPercent: -50 }); TweenLite.set(outline, { width: origSize.width, height: origSize.height }); TweenLite.set(handle, { x: origVector.x, y: origVector.y }); Draggable.create(container); Draggable.create(handle, { onPress: stopPropagation, onDrag: transformItems }); TweenLite.set(container, { autoAlpha: 1 }); function transformItems() { // Move vector var v2 = { x: this.x, y: this.y }; // Length of move vector var len2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y); // Normalize move vector if (len2) { v2.x /= len2; v2.y /= len2; } var angle = Math.atan2(v2.y, v2.x) - angle1; var scale = len2 / len1; TweenLite.set(outline, { width: origSize.width * scale, height: origSize.height * scale, rotation: angle + "_rad" }); TweenLite.set(image, { scale: scale, rotation: angle + "_rad" }); } function stopPropagation(event) { event.stopPropagation(); } //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: