CSS实现图片放大
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片放大</title><style>*{margin:0;padding:0;}.photo{width:622px; height:427px;background:#f00;margin:0 auto;}.photo h3{border-bottom:1px dashed #000;text-align:center;padding-bottom:7px;font-size:12px; margin-bottom:13px;}.photo ul li{list-style:none;float:left; width:116px; height:91px;background:#f2f2f4; border:1px solid #999; padding:5px; margin:0 3px 6px; }.photo ul li img{width:100px; height:75px; border:1px solid #000;padding:2px; background:#fff; }.photo ul li img:hover{width:200px;height:150px;left:-50px;top:-37.5px; position:relative;}</style></head><body><div class="photo"><h3>图片放大</h3><ul><li><img src="img/photo01.jpg"></li><li><img src="img/photo02.jpg"></li><li><img src="img/photo03.jpg"></li><li><img src="img/photo04.jpg"></li><li><img src="img/photo05.jpg"></li><li><img src="img/photo06.jpg"></li><li><img src="img/photo07.jpg"></li><li><img src="img/photo08.jpg"></li><li><img src="img/photo09.jpg"></li><li><img src="img/photo10.jpg"></li><li><img src="img/photo11.jpg"></li><li><img src="img/photo12.jpg"></li><li><img src="img/photo13.jpg"></li><li><img src="img/photo14.jpg"></li><li><img src="img/photo15.jpg"></li><li><img src="img/photo16.jpg"></li><li><img src="img/photo17.jpg"></li><li><img src="img/photo18.jpg"></li><li><img src="img/photo19.jpg"></li><li><img src="img/photo20.jpg"></li></ul></div></body></html>
![[CSS] CSS实现鼠标移入图片放大效果](https://700zi.400zi.cn/uploadfile/img/15/247/a48be385ede2e32e0a11268fd9d8eb59.jpg)
