HTML+CSS实现定位小案例

定位实现鼠标滑过图片等比例放大，显示在原尺寸图片的上方。

起始状态

实现状态

 

代码实现

<style type="text/css">
	img{
		border: 0;
		width: 100px;
		height: 75px;
	}
	.box{
		width: 600px;
		height: 300px;
		margin: 100px auto;
		/*margin: 0 auto;*/
		position: relative;
	}
	.box div{
		width: 106px;
		height: 81px;
		border: 3px solid #efedf0;
		float: left;
		text-align: center;
	}
	.box div:hover img{
		width: 200px;
		height:150px;
		position: absolute;
		margin-top: -25px;
		margin-left: -100px;
	}
</style>

<div class="box">
		<div><img src="img/img/photo01.jpg"></div>
		<div><img src="img/img/photo02.jpg"></div>
		<div><img src="img/img/photo03.jpg"></div>
		<div><img src="img/img/photo04.jpg"></div>
		<div><img src="img/img/photo05.jpg"></div>
		<div><img src="img/img/photo06.jpg"></div>
		<div><img src="img/img/photo07.jpg"></div>
		<div><img src="img/img/photo08.jpg"></div>
		<div><img src="img/img/photo08.jpg"></div>
		<div><img src="img/img/photo10.jpg"></div>
		<div><img src="img/img/photo11.jpg"></div>
		<div><img src="img/img/photo12.jpg"></div>
		<div><img src="img/img/photo13.jpg"></div>
		<div><img src="img/img/photo14.jpg"></div>
		<div><img src="img/img/photo15.jpg"></div>
		<div><img src="img/img/photo16.jpg"></div>
		<div><img src="img/img/photo17.jpg"></div>
		<div><img src="img/img/photo18.jpg"></div>
		<div><img src="img/img/photo19.jpg"></div>
		<div><img src="img/img/photo20.jpg"></div>
	</div>