<html> <head> <meta charset="UTF-8"> <title>照片墙</title> <link rel="stylesheet" type="text/css" href="../css/pictureWall.css"/> </head> <body> <h2>照片墙</h2> <div> <img src="../picWallImg/01.jpg" width="200px" height="150px"/> <img src="../picWallImg/02.jpg" width="230px" height="180px"/> <img src="../picWallImg/03.jpg" width="200px" height="300px"/> <img src="../picWallImg/04.jpg" width="150px" height="200px"/> </div> </body> </html>
*{ padding: 0px; margin: 0px; border: 0px; } h2{ font-size: 50px; text-align: center; } div{ width: 1100px; height: 400px; background-color:#CCCCCC ; margin: 100px auto; position: relative; } img{ position: absolute; padding:10px ; background-color:#fff ; cursor: pointer; } img:nth-of-type(1){ margin-top: 100px; margin-left:100px ; transform: rotate(20deg); z-index: 1; } img:nth-of-type(2){ margin-top: 100px; margin-left:280px ; transform: rotate(-40deg); z-index: 2; } img:nth-of-type(3){ margin-top: 50px; margin-left:530px ; transform: rotate(20deg); z-index: 3; } img:nth-of-type(4){ margin-top: 130px; margin-left:750px ; transform: rotate(50deg); z-index: 2; }
img:hover{ transform: scale(2); transition: all 3s; box-shadow: 10px 10px 30px #ccc; z-index: 10; }