本例中将三张图（来自网络）进行堆叠，鼠标悬停触发。附有源代码
<!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>
