标签：
本例中将三张图（来自网络）进行堆叠，鼠标悬停触发。附有源代码
<!DOCTYPE html>
<html>
<head>
<title>照片墙</title>
<meta charset="utf-8">
<style type="text/css">
.parent{
width: 1000px;height: 800px;margin: 0 auto;position: relative;
background-color: black;
}
.parent img{width: 300px;height: 150px;position: absolute;transition: all 3s;}
img:nth-child(1){top: 300px;left: 350px;transform: rotate(45deg);z-index: 3;-webkit-filter:blur(2px);}
img:nth-child(2){top: 300px;left: 350px;z-index: 2;-webkit-filter:blur(3px);}
img:nth-child(3){top: 300px;left: 350px;transform: rotate(-45deg);z-index: 1;-webkit-filter:blur(1px);}
img:hover{transform: scale(3);-webkit-filter:blur(0px);z-index: 100;}
</style>
</head>
<body>
<div class="parent">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1468408683931&di=0ef6a07b6b38ec2a7c0be9794922605a&imgtype=jpg&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Fc7%2F27%2Fd%2F23.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1468408683929&di=c96c378ca0d60d7147fedbc2366da230&imgtype=jpg&src=http%3A%2F%2Fa2.att.hudong.com%2F06%2F10%2F300001190914130190105052966_950.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1468408683928&di=0553506fb8bcf19f4e9a818fd6fbc69d&imgtype=jpg&src=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F150331%2F139-1503311U111.jpg">
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/LJY0596/p/5667930.html
