css中hover变大效果

html代码：

<div id="body_img">
	<img src="img/11.jpg" alt="">
</div>

css代码：

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
				
		#body_img img{
			width: 600px;
			height: 320px;
			cursor: pointer;
			/* 手动鼠标 */
			transition: 1s;
			/* 过度时间 */
		}
				
		#body_img{
			width: 600px;
			height: 320px;
			overflow: hidden;
			/* 当图片变大超出了外包div后隐藏 */
		}
				
		#body_img:hover img{
			transition: 1s;
			/* 过度时间 */
			transform: scale(1.1);
			/* 变形一比一放大 */
		}
</style>

思路：先设置一个div包含一张图片设置大小，溢出隐藏（当滑动图片上面后变大隐藏）给图片设置手动鼠标和过度时间。当鼠标滑动div上面让图片变形成一比一放大，外加过度时间