In this post I am going to show to How to create a zooming effect with CSS3 on image. You might have seen this kind of effect only with flash and using javascript or with any other scripting languages. But why use Flash or js when CSS can do the same work. So lets do it now with CSS3.

Now let go through the code.

HTML

<div class='img' id='img-1'>
	<div class='mask'></div>
	<img src='http://www.nikesh.me/image/01.jpg' />
</div>
<div class='img' id='img-2'>
	<div class='mask'></div>
	<img src='http://www.nikesh.me/image/07.jpg' />
</div>
<div class='img' id='img-3'>
	<div class='mask' id='mask-1'></div>
	<div class='mask' id='mask-2'></div>
	<img src='http://www.nikesh.me/image/05.jpg' />
</div>
<div class='img' id='img-4'>
	<div class='mask'></div>
	<img src='http://www.nikesh.me/image/04.jpg' />
</div>
<div class='img' id='img-5'>
	<div class='mask'></div>
	<mg src='http://www.nikesh.me/image/06.jpg' />
</div>
<div class='img' id='img-6'>
	<div class='mask'></div>
	<img src='http://www.nikesh.me/image/08.jpg' />
</div>

CSS

.img{
	float:left;
	-webkit-transition-duration: 0.5s;
	}
.img img{
	padding:10px;
	border:1px solid #fff;
}
.img:hover{
	-webkit-transform:scale(0.8);
	-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
	width: 100%;
	background-color: rgb(0, 0, 0);
	position: absolute;
	height: 100%;
	opacity:0.6;
	cursor:pointer;
	-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
	height:0%;
}
#img-2:hover .mask{
	height:0%;
	margin-top:130px;
}
#img-3 #mask-1 {
	width:50%;
}
#img-3 #mask-2{
	width:50%;
	margin-left:211px;
}
#img-3:hover #mask-1{
	width:0%;
}
#img-3:hover #mask-2{
	margin-left:430px;
	width:0%;
}
#img-4:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
}
#img-5:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateZ(750deg);
}

To view the original output please visit DEMO.