HTML相册效果实现

最终实现的效果如下，可进入展示页面查看
展示页面：http://xyy9.gitee.io/roll/album.html

HTML

都是一样的 div 自行复制即可

<!--相册-->
<div id="albums">
<a href="day_1.html">
	<div class="smallpicshow">
		<div class="smallpicshow_zoom">
			<img class="smallpic" src="img/day1.jpg" >
		</div>
	</div>
</a>
<a href="day_2.html">
	<div class="smallpicshow">
		<div class="smallpicshow_zoom">
			<img class="smallpic" src="img/day2.jpg" >
		</div>
	</div>
</a>
<a href="day_3.html">
	<div class="smallpicshow">
		<div class="smallpicshow_zoom">
			<img class="smallpic" src="img/day3.jpg" >
		</div>
	</div>
</a>
<a href="day_1.html">
	<div class="smallpicshow">
		<div class="smallpicshow_zoom">
			<img class="smallpic" src="img/1571642606356.jpeg" >
		</div>
	</div>
</a>
<a href="day_1.html">
	<div class="smallpicshow">
		<div class="smallpicshow_zoom">
			<img class="smallpic" src="img/1571642606356.jpeg" >
		</div>
	</div>
</a>

album.css

#context{
	margin: 0 auto;
	margin-top: 448px;
	width: auto;
	height: auto;
	background-color: #FFFFFF;
}

#albums{
	margin: 0 auto;
	padding: 70px 50px 50px 140px;
	text-align: center;
	width: auto;
	height: auto;
	
}

#bgimage_album{
	margin:0px;
	padding:0px;
	position: fixed;
	right:0px;
	bottom:200px;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -11;
}

.smallpicshow{
	width: 200px;
	height: 200px;
	float: left;
	text-align: center;
	vertical-align: middle;
	margin: 60px;
}
.smallpicshow_zoom{
	width: 200px;
	height: 200px;
	box-shadow: 10px 10px 10px 10px #E5DFD3;
	float: left;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
	transition: all 0.3s;
}
.smallpicshow:hover .smallpicshow_zoom{
	width: 250px;
	height: 250px;
	transform: rotate(3deg);
	box-shadow: 0px 0px 35px 35px #D6CCB7;
}
.smallpic{
	width: 100%;
	height: 100%;
}

网站源码：码云仓库
图片：https://gitee.com/xyy9/roll/blob/master/img/1571642606356.jpeg