CSS-鼠标移入图片放大居中效果图_css 元素鼠标移入从中心变大-优快云博客

本文介绍如何使用CSS实现鼠标移入图片时，图片放大并居中的效果。通过示例代码和最终显示的结果，展示了CSS3在图片交互上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style:none;}
			a{text-decoration:none;color:#000;}
			.box{
				width: 630px;
				height: 470px;
				margin:100px auto;
			}
			.title{
				height: 40px;
				line-height: 40px;
				border-bottom: 1px dotted #ccc;
				font-size:18px;
				font-weight: normal;
				text-align:center;
				color:orange;
			}
			li{
				width:100px;
				height:75px;
				border:1px solid #000;
				padding:6px;
				margin:6px;
				float:left;
				position:relative;
			}
			img{
				width: 100px;
				height: 75px;
				
			}
			img:hover{
				width: 200px;
				height: 150px;
				position:absolute;
				top:50%;
				left:50%;
				margin-left:-100px;
				margin-top:-75px;
				z-index:2;
			}
			.txt{
				font-size:12px;
				height: 20px;
				line-height: 20px;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h3 class="title">Hoverbox Image Gallery</h3>
			<ul>
				<li>
					<img src="img1/photo01.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo02.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo03.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo04.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo05.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo06.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo07.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo08.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo09.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo10.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo11.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo12.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo13.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo14.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo15.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo16.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo17.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo18.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo19.jpg" alt="" />
				</li>
				<li>
					<img src="img1/photo20.jpg" alt="" />
				</li>
			</ul>
			<p class="txt">XHTML CSS 508 | Hoverbox by Nathan Smith. | Read the Tutorial.</p>
		</div>
	
	</body>
</html>