web：简单照片墙放置，鼠标悬浮放大

三九不乖

于 2022-08-19 18:30:05 发布

阅读量1.6k

点赞数 2

分类专栏： web前端文章标签：前端 css css3

本文链接：https://blog.youkuaiyun.com/liyujiederizhi/article/details/126424460

版权

本文介绍了如何使用CSS3的position、transform和rotate属性创建一个照片墙布局，当鼠标悬停在图片上时，图片会放大并覆盖其他图片，提供了一种动态的用户体验。

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

简单利用position， transform，rotate制作如下照片墙效果，鼠标点击放大当前图片并且覆盖其他照片。

在这里插入图片描述
主体部分：index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	
	#链接样式部分
	<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
	
	<div class="box" id="box">
		#以下为图片地址
		<img src="img/10.jpg" >
		<img src="img/2.jpg" >
		<img src="img/3.jpg" >
		<img src="img/4.jpg" >
		<img src="img/5.jpg" >
		
		<img src="img/6.jpg" >
		<img src="img/7.jpg" >
		
		<img src="img/8.jpg" >
		<img src="img/9.jpg" >
		<img src="img/1.jpg" >
	</div>
	</body>
</html>

CSS部分：new_file.css

div img:nth-child(even){
   
			width: 200px;
			
		}
		div img:nth-child(odd){
   
			width: 300px

最低0.47元/天解锁文章