Zooming images is one useful technique every front end web developer should learn. You might need the knowledge in one of your projects. Zooming images can be tricky but after reading this article you would get the hang of it.
\n
\n
\n
\n
\n
\n
\n
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]
\n
\nIn this example we would learn how to zoom images in HTML. For this example we will use:<\/p>\n
You might ask, why would I need to zoom an image? it doesn’t seem to be that important. Below are some of the reasons:<\/p>\n
The list is endless. We can develop an app like this with pure CSS or CSS combined with JavaScript.<\/p>\n
Lets look at an example below:<\/p>\n
index.html<\/em><\/span><\/p>\n If you load this file in your browser, two buttons (a minus and plus button) and an image are displayed. To zoom the image click on the plus button. To return the image to its normal size, click on the minus button. If the image is already zoomed, clicking on the plus button does nothing. If the image is in its normal size clicking on the minus button does nothing. We are able to achieve this effect by manipulating the image scale property.<\/p>\n Lets look at a purely CSS example<\/p>\n index2.html<\/em><\/span><\/p>\n This is a beautiful example. Load the HTML file in your browser. When the page loads, hover your mouse over the image which is at the bottom of the screen and watch the image zoom in (The zooming effect applied to the image is actually an animation). The code above is the brain behind the zoom in and zoom out animation. We achieved this effect with CSS transition. In this example we learnt how to zoom in and zoom out images with JavaScript and pure CSS. You can use what you learn in this example as a foundation to build web apps with sophisticated zooming functions.<\/p>\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> HTML5 Image Zoom Example <\/title>\r\n\t<style>\r\n\r\n.hol{\r\nwidth:100%;\r\nheight:100%;\r\n}\r\n#trol{\r\ntext-align:center;\r\nfont-size:300%;\r\nmargin:50px 50px 50px 50px;\r\n}\r\n.sp{\r\nmargin:15px 15px 15px 15px;\r\n\r\n}\r\n#image{\r\nposition: absolute;\r\nbottom: 0px;\r\nleft:25%;\r\n}\r\n<\/style>\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nfunction init(){\r\nvar mi = document.getElementById(\"minus\");\r\nmi.addEventListener(\"click\",mHandler\t,false);\r\nvar pl = document.getElementById(\"plus\");\r\npl.addEventListener(\"click\",pHandler,false);\r\n}\r\nfunction mHandler(){\r\ndocument.getElementById(\"image\").style.transform=\"scale(2,2)\";\r\n\r\n\r\n}\r\n\r\nfunction pHandler(){\r\ndocument.getElementById(\"image\").style.transform=\"scale(1,1)\";\r\n\r\n\r\n}\r\n<\/aa>\r\n<div id=trol>\r\n<span id=minus class=sp><b>+<\/b><\/span>\r\n<span id=plus class=sp><b>-<\/b><\/span>\r\n<\/div>\r\n<div id=tainer>\r\n<img id=image src=\"pic.png\">\r\n<\/div>\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nfunction pHandler(){\r\ndocument.getElementById(\"image\").style.transform=\"scale(1,1)\";\/\/scale down the image\r\n}\r\n<\/pre>\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> HTML5 Image Zoom Example <\/title>\r\n\t<style>\r\n\r\n\r\n\r\n\r\n\r\n#image{\r\nposition: absolute;\r\nbottom: 0px;\r\nleft:25%;\r\n}\r\nimg {\r\n width: 100px;\r\n height: 100px;\r\n background: white;\r\n -webkit-transition-property: width, height; \/* Safari *\/\r\n -webkit-transition-duration: 2s; \/* Safari *\/\r\n transition-property: width, height;\r\n transition-duration: 2s;\r\n}\r\n\r\nimg:hover {\r\n width: 300px;\r\n height: 300px;\r\n}\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\r\n<div id=tainer>\r\n<img id=image src=\"pic.png\">\r\n<\/div>\r\n\t<\/body>\r\n\t<\/html>\r\n\r\n\r\n<\/pre>\n
\nIf you load this example in a mobile browser, simply click on the image and watch the image zoom in, when the animation is finished click outside the image and watch the image grow smaller again. The zoom in and zoom out effect on the image was achieved purely with CSS.
\nWe achieved this effect with CSS transition.<\/p>\nimg {\r\n width: 100px;\r\n height: 100px;\r\n background: white;\r\n -webkit-transition-property: width, height; \/* Safari *\/\r\n -webkit-transition-duration: 2s; \/* Safari *\/\r\n transition-property: width, height;\r\n transition-duration: 2s;\r\n}\r\n\r\nimg:hover {\r\n width: 300px;\r\n height: 300px;\r\n}\r\n<\/pre>\n
\nTransitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
\nThe transition-property specifies the name of the CSS property. The transition effect is for (the transition effect will start when the specified CSS property changes).<\/p>\n2. Summary<\/h2>\n
3. Download the source code<\/h2>\n