css photo frame animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
          background:url('https://images.pexels.com/photos/172277/pexels-photo-172277.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
        }
        ul{ margin:0; padding:0; list-style:none; }
        li{
          text-align:center;
          display:inline-block;
          position:relative;
          border:solid 12px #fff;
          background:#fff;
          box-shadow:0 0 15px 0px #555;
          transition:all 1s ease;
          top:50px;
        }
        li:hover{ top:0px; opacity:0.5; }
        li:nth-child(1){ transform:rotate(10deg); }
        li:nth-child(2){ transform:rotate(0deg); }
        li:nth-child(3){ transform:rotate(-10deg); }
        li:nth-child(4){ transform:rotate(20deg); }
        li:nth-child(5){ transform:rotate(-20deg); }
        p{ margin:0; }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="https://placeimg.com/300/300/nature" width="200">
            <p>image #1</p>
        </li>
        <li>
            <img src="https://placeimg.com/300/300/animals" width="200"/>
            <p>image #2</p>
        </li>
        <li>
            <img src="https://placeimg.com/300/300/people" width="200"/>
            <p>image #3</p>
        </li>
        <li>
            <img src="https://placeimg.com/300/300/arch" width="200"/>
            <p>image #4</p>
        </li>
        <li>
            <img src="https://placeimg.com/300/300/tech" width="200"/>
            <p>image #5</p>
        </li>
    </ul>
    <!-- Source code from https://codemyui.com/polaroid-images-gallery-in-pure-css/ -->
</body>
</html>