Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an image to zoom with CSS and JavaScript?
Following is the code to create an image zoom:
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {box-sizing: border-box;} .img{ display: inline-block; } .img-zoom-container { position: relative; } .img-zoom-zoomLens { position: absolute; border: 1px solid #d4d4d4; width: 50px; height: 50px; } .myresult{ display: inline-block; } .img-zoom-result { border: 1px solid #d4d4d4; } </style> </head> <body> <h1>Image Zoom Example</h1> <div class="img-zoom-container"> <img class="myimage" src="https://i.picsum.photos/id/1015/536/354.jpg?hmac=x7KEhPoOftwPXIgnQoTQzNtVUqaPYwndK8n1x_9rWuM" style="width: 400px; height: 400px;"> <div class="myresult" class="img-zoom-result" style="width: 400px;height: 400px;"></div> </div> <h1>Hover over the image on the left to see it zoomed on right</h1> <script> let imageEle = document.querySelector('.myimage'); let resultEle = document.querySelector('.myresult'); enlargeImage(imageEle, resultEle); function enlargeImage(imgEle, resultEle) { var zoomLens, xPos, yPos; zoomLens = document.createElement("DIV"); zoomLens.setAttribute("class", "img-zoom-zoomLens"); imgEle.parentElement.insertBefore(zoomLens, imgEle); xPos = resultEle.offsetWidth / zoomLens.offsetWidth; yPos = resultEle.offsetHeight / zoomLens.offsetHeight; resultEle.style.backgroundImage = `url(${imgEle.src})`; resultEle.style.backgroundSize = (imgEle.width * xPos) + "px " + (imgEle.height * yPos) + "px"; zoomLens.addEventListener("mousemove", lensMoveCalculate); imgEle.addEventListener("mousemove", lensMoveCalculate); zoomLens.addEventListener("touchmove", lensMoveCalculate); imgEle.addEventListener("touchmove", lensMoveCalculate); function lensMoveCalculate(e) { var pos, x, y; pos = currentCursonPos(e); x = pos.x - (zoomLens.offsetWidth / 2); y = pos.y - (zoomLens.offsetHeight / 2); if (x > imgEle.width - zoomLens.offsetWidth) {x = imgEle.width - zoomLens.offsetWidth;} if (x < 0) {x = 0;} if (y > imgEle.height - zoomLens.offsetHeight) {y = imgEle.height - zoomLens.offsetHeight;} if (y < 0) {y = 0;} zoomLens.style.left = x + "px"; zoomLens.style.top = y + "px"; resultEle.style.backgroundPosition = "-" + (x * xPos) + "px -" + (y * yPos) + "px"; } function currentCursonPos(e) { var a, x = 0, y = 0; e = e || window.event; a = imgEle.getBoundingClientRect(); x = e.pageX - a.left; y = e.pageY - a.top; x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } </script> </body> </html> Output
The above code will produce the following output:
Updated on: 2021-02-16T06:41:53+05:30
963 Views
Advertisements