Home » HTML5 » HTML5 Zoom Image Example

About Olayemi Odunayo

Olayemi Odunayo
I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

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 a 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!

 

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

  • A computer with a modern browser installed.
  • notepad++.

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:

  • You just created an online image gallery. Users simply upload their pictures and can view them from any device connected to the internet. You can add a zoom effect to your web app so users can zoom in on the images and view very tiny details.
  • An Online Image Editor: You just created an online image editor. Your users want to add an effect to a portion of their image or just draw something on the image. Once again the zoom effect might be needed.
  • Your Project supervisor or a client needs an app with this functionality.

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 

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook