CSS实现鼠标放上图片放大

最新推荐文章于 2024-10-13 20:55:11 发布

clqxmt

最新推荐文章于 2024-10-13 20:55:11 发布

阅读量1.1k

点赞数 4

分类专栏： CSS 文章标签： CSS实现鼠标放上图片放大

本文链接：https://blog.csdn.net/weixin_43755513/article/details/97505353

版权

CSS 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述