div+css实现图片墙排列效果代码-html代码-BFW代码库

div+css实现图片墙排列效果代码

代码语言：html

代码描述：div+css实现图片墙排列效果代码，鼠标悬浮会恢复彩色。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
*{
	margin:0;
	box-sizing:border-box;
}
body, html{
	height:100%;
	width:100%;
}
.container{
	height:100%;
	width:100%;
	display:grid;
	grid-template-columns:repeat(6,1fr);
	grid-template-rows:repeat(6,1fr);
	gap:1rem;
	padding:1rem;
	background-color:#faf3dd;
}
.img{
	position:relative;
		border-radius:0.5rem;
overflow:hidden;
}
.img::after{
	position:absolute;
	content:'';
	top:0;
	left:0;
	width:100%;
	height:100%;
	backdrop-filter:brightness(120%) blur(1px) saturate(10%);
	transition:	backdrop-filter 0.3s;
}
.img:hover::after{
	backdrop-filter:none;
}
.img img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.img:nth-of-type(1){
	grid-column:1/2;
	grid-row:1/5;
}
.img:nth-of-type(2){
	grid-column:1/3;
	grid-row:5/7;
}
.img:nth-of-type(3){
	grid-column:2/5;
	grid-row:1/3;
}
.img:nth-of-type(4){
	grid-column:2/3;
	grid-row:3/5;
}
.img:nth-of-type(5){
	grid-column:3/4;
	grid-row:3/7;
}
.img:nth-of-type(6){
	grid-column:5/7;
	grid-row:1/4;
}
.img:nth-of-type(7){
	grid-column:5/7;
	grid-row:4/7;
}
.img:nth-of-type(8){
	grid-column:4/5;
	grid-row:6/7;
}
.img:nth-of-type(9){
	grid-column:4/5;
	grid-row:3/6;
}
</style>



  
  
</head>

<body>
  <div class="container">
	<div class="img"><img src="https://images.unsplash.com/photo-1414609245224-afa02bfb3fda?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTM3MDg1NTd8&ixlib=rb-4.0.3&q=85" alt=""/></div>
	<div class="img"><img src="https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTM3MDg1NTd8&ixlib=rb-4.0.3&q=85" alt=""/></div>
	&.........完整代码请登录后点击上方下载按钮下载查看