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.
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
You can download the full source code of this example here: html5zoomimageexample
