css实现鼠标悬停图片放大显示

最新推荐文章于 2025-06-21 14:20:59 发布

、不知不觉、

最新推荐文章于 2025-06-21 14:20:59 发布

阅读量3.7w

点赞数 12

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/u010394015/article/details/51917923

CSS 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现图片点击放大效果的方法。通过简单的代码示例展示了如何设置图片的初始状态并在鼠标悬停时平滑过渡到放大状态。

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			.avatar {
				display: block;
				width: 300px;
				margin: 0 auto;
				overflow: hidden;
			}
			
			.avatar img {
				display: block;
				border: 0;
				width: 100%;
				transform: scale(1);
				transition: all 1s ease 0s;
				-webkit-transform: scale(1);
				-webkit-transform: all 1s ease 0s;
			}
			
			.avatar:hover img {
				transform: scale(1.3);
				transition: all 1s ease 0s;
				-webkit-transform: scale(1.3);
				-webkit-transform: all 1s ease 0s;
			}
		</style>
	</head>

	<body>
		<a href="" class="avatar"><img src="img/aaa.jpg" /></a>
	</body>

</html>