HTML5 Zoom Image Example

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.
 
 
 
 
 
 
 
 

Want to be an HTML5 Ninja?
Subscribe to our newsletter and download the HTML5 Programming Cookbook right now!
In order to get you prepared for your HTML5 development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!
I agree to the Terms and Privacy Policy

Thank you!

We will contact you soon.


 
In this example we would learn how to zoom images in HTML. For this example we will use:

1. Getting Started

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:

The list is endless. We can develop an app like this with pure CSS or CSS combined with JavaScript.

1.2 Examples

Lets look at an example below:

index.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> HTML5 Image Zoom Example </title>
	<style>
.hol{
width:100%;
height:100%;
}
#trol{
text-align:center;
font-size:300%;
margin:50px 50px 50px 50px;
}
.sp{
margin:15px 15px 15px 15px;
}
#image{
position: absolute;
bottom: 0px;
left:25%;
}
</style>
	</head>
	<body onload=init()>
<script>
function init(){
var mi = document.getElementById("minus");
mi.addEventListener("click",mHandler	,false);
var pl = document.getElementById("plus");
pl.addEventListener("click",pHandler,false);
}
function mHandler(){
document.getElementById("image").style.transform="scale(2,2)";
}
function pHandler(){
document.getElementById("image").style.transform="scale(1,1)";
}
</aa>
<div id=trol>
<span id=minus class=sp><b>+</b></span>
<span id=plus class=sp><b>-</b></span>
</div>
<div id=tainer>
<img id=image src="pic.png">
</div>
	</body>
	</html>

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.

function pHandler(){
document.getElementById("image").style.transform="scale(1,1)";//scale down the image
}

Lets look at a purely CSS example

index2.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> HTML5 Image Zoom Example </title>
	<style>
#image{
position: absolute;
bottom: 0px;
left:25%;
}
img {
    width: 100px;
    height: 100px;
    background: white;
    -webkit-transition-property: width, height; /* Safari */
    -webkit-transition-duration: 2s; /* Safari */
    transition-property: width, height;
    transition-duration: 2s;
}
img:hover {
    width: 300px;
    height: 300px;
}
</style>
	</head>
	<body>
<div id=tainer>
<img id=image src="pic.png">
</div>
	</body>
	</html>

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).
If 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.
We achieved this effect with CSS transition.

img {
    width: 100px;
    height: 100px;
    background: white;
    -webkit-transition-property: width, height; /* Safari */
    -webkit-transition-duration: 2s; /* Safari */
    transition-property: width, height;
    transition-duration: 2s;
}
img:hover {
    width: 300px;
    height: 300px;
}

The code above is the brain behind the zoom in and zoom out animation. We achieved this effect with CSS transition.
Transitions 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.
The 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).

2. Summary

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.

3. Download the source code

Download
You can download the full source code of this example here: html5zoomimageexample 
Exit mobile version