1、要给图片加上一个边框，这样图片放大的时候就不会挤压其它元素，并且
- 边框overflow=hidden，超出了就隐藏
- 图片放大的时候zIndex要足够大，这样就不会被其他元素遮挡
2、使用hover伪类
- 可以使用transform=scale(1.2)表示放大
- 可以使用transition-duration属性添加渐变效果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中心点逐渐放大效果</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.content {
margin: 40px auto;
width: 450px;
height: 301px;
border:10px solid #808080;
overflow:hidden;
z-index:2;
}
.content img {
width: 450px;
height: 301px;
transition-duration:0.5s;
z-index:1;
}
.content img:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2); /*Safari 和 Chrome*/
-moz-transform: scale(1.2); /*Firefox*/
-ms-transform: scale(1.2); /*IE9*/
-o-transform: scale(1.2); /*Opera*/
}
</style>
</head>
<body>
<div class="content">
<img src="img/5.jpg" class="pic"/>
</div>
</body>
</html>