CSS: zooming images

Today I've found a nice jQuery demo which creates a zoom effect on images using the hover event. This is something that can be actually done with CSS. So here's my demo.

We start with a simple markup structure:

<div id="gallery">

	<img src="1.jpg" alt="" />
	<img src="2.jpg" alt="" />
	<img src="3.jpg" alt="" />
	<img src="4.jpg" alt="" />
	<img src="5.jpg" alt="" />

</div>

We want to change each image's position by 10 pixels from top and from left, plus augmenting its dimensions. For that reason, the main container must have proportional dimensions:

#gallery {
	width: 950px;
	height: 250px;
	margin: 0 auto;
}

#gallery img {
	float: left;
	margin-right: 20px;
	position: relative;
	cursor: pointer;
}

Finally, our effect on :hover:

#gallery img:hover {
	top: 10px;
	left: 10px;
	width: 200px;
	height: 200px;
	border: 2px solid #d34545;
	padding: 4px;
	border-radius: 5px;
}

You can see the demo below.

Demo

Live demo