图片放大术--css小项目我正在参加码上掘金体验活动，详情：show出你的创意代码块一起养成写作习惯！这是我参与「

我正在参加码上掘金体验活动，详情：show出你的创意代码块一起养成写作习惯！
这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

又是一个比较无聊的小案例。当你把鼠标移动到图片上面，图片就会进行放大。里面用到了css和html的知识点。具体的内容如下所示。

项目展示

写作思路

首先是找了一些图片，然后对图片进行处理。具体做法如下，先把图片按照一定的格式进行展示，更改width和length属性。之后将这些图片放到一个大的盒子里面。最后加上css特效，会出现点击图片，整个图片就会进行放大的效果。

代码展示

html

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="photo">
			
				<img src="https://images.unsplash.com/photo-1542272201-b1ca555f8505?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" >
			
				<img src="https://images.unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" >
		
				<img src="https://images.unsplash.com/photo-1436891620584-47fd0e565afb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" >
			
				<img src="https://images.unsplash.com/photo-1530908295418-a12e326966ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" >
			
				<img src="https://images.unsplash.com/photo-1619453986741-43fe6066a86e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=327&q=80"  class="">
		</div>
	</body>
</html>

css

	margin: 0;
	padding: 0;
}


.a4{
    对某一个图片就行大小进行更改
	width: 390px;
	height: 600px;
}
.photo{
        让所有的图片变成一个大的盒子
	width:1500px;
	height: 500px;
	margin: 200px auto;
	overflow: hidden;
}
.photo img{
	width: 300px;
	height: 500px;
	float: left; 让图片向左浮动
}

div:active{

    margin:100px;

    transform:scale(1,2);

    }

后续的扩展，可以考虑将鼠标放到图片上，图片可以进行旋转，或者出现百叶窗的效果。